將問題附加到ul

我正在創建一個ul並將li添加到它中，使用jquery append函數中的數據。在這個append函數中，我調用另一個函數來分析更多的xml數據並將其添加到ul。但是此功能只顯示[object Object]。而當我console.log(li)裏面func()功能，然後它顯示正確的li。將問題附加到ul

這裏是我的代碼

container.append(
      '<ul>' 
       + '<li>' 
        + '<h4 class="title stitle">' + from 
         + '<section><span class="subtitle">' + routeTime + ' mins ' + routeDist + ' km</span></section><br>' 
        + '</h4>' 
        + '<ul class="contents">' 
         + '<li>' + '<img src="' + walk + '" />' + '</li>' 
         + '<li>' + '<span class="">' + startTime + ' ' + distance + ' km</li>' 
         + func(lines) //<-- function call here 
        + '</ul>' 
       + '</li>' + 
      '</ul>' 
      );

這裏是FUNC功能代碼

func = function (lines) { 
    var li = $('<li></li>'); 

    lines.each(function() { 
     var stopel   = $(this), 
      busCode   = stopel.attr('code').slice(1,4), 
      stops   = stopel.find('STOP'); 

     li.append('<img src="' + bus + '" />') 
     .append('<span>' + busCode + '</span>') 
     .append('<section class="clear"></section>'); 

     stops.each(function() { 
      var el2   = $(this).find('NAME'), 
       deptime  = $(this).find('DEPARTURE'); 
      li.append('<p class="stop">' + deptime.attr('time') + ' ' + el2.attr('val') + '</p>'); 
     }); 
     li.append('<p class="last"></p>'); 
    }); 
    console.log(li); 
    return li; 
}

我在哪裏犯錯？

來源

2012-11-17 2619

的問題是，你的函數返回一個jQuery對象。當你在這個對象上使用+運算符時，你將它用作字符串。因此試圖將其轉換爲字符串，結果爲[object Object]。

jQuery對象有一個名爲.html()的方法，它將該jQuery對象的HTML內容作爲字符串返回 - 您可以安全地在並置中使用該字符串。在你的情況下，你需要一個.outerHtml()方法，這在jQuery中不存在，但你可以添加它（參見this question）。或者，你可以簡單地使用DOM（而不是jQuery）.outerHTML屬性，Firefox用來不支持它，但他們現在做（從版本11，糾正我，如果我錯了）。

可以調用方法上func這樣的返回值：

... 
+ '<li>' + '<span class="">' + startTime + ' ' + distance + ' km</li>' 
+ func(lines).outerHtml() //<-- function call here 
+ '</ul>' 
...

或者，如果你想要的DOM方法：

+ func(lines).get(0).outerHtml //<-- function call here

快速的建議：你應該使用像Mustache（我的首選），Handlebars等模板解決方案。通過在Javascript中連接字符串來創建HTML是醜陋的，難以維護並違反了01的規則。當你嘗試這些圖書館之一時，你會想知道你怎麼能沒有它。

來源

2012-11-17 12:29:49 kapa

我按照自己的方式做了，但現在它不會連接'li'，而只連接'li'中的內容。我怎樣才能讓「li」包含其內容？ – 2619

@ x4f4r嗯，那是真的。這個問題應該有所幫助：http：// stackoverflow。com/questions/2419749/get-selected-elements-external-html – kapa

@ x4f4r更新我的答案以解決您的問題。 – kapa

你正在返回jQuery對象，但看起來像你想要的HTML。

在你的函數結束試試這個：

return li.outerHTML;

來源

2012-11-17 12:29:06

當你做 var li = $("<li></li>")，你傳遞一個對DOM創建的List對象實例的引用。你正在操作這個對象，因此你得到的輸出爲[object Object]，而在控制檯中你看到了該對象的HTML。

您應該對li對象引用進行字符串化，或者在$ .html（li）或li.html（）中使用它。

來源

2012-11-17 12:43:51

將問題附加到ul

回答

相關問題