在JQuery中動態創建LI

$.each(data.TrendingProducts, function (i, item) { 
    $("#trendcontent").append('<li>') 
     .append('<div class="product-wrapper">') 
     .append('<div class="image-wrapper">'); 
    $("<img/>").attr("src", item.Image).appendTo("#trendcontent"); 
    $("#trendcontent").append('</div>').append('</div').append('</li>'); 
}); 


<ul class="large-block-grid-3 small-block-grid-3"> 
    <div id="trendcontent"></div>   
</ul>

嗨我想在jQuery中創建一個無序列表，但列表形式不正確。任何建議/幫助？在JQuery中動態創建LI

來源

2013-08-19 Alex Adams

一個建議是正確縮進你的代碼。這通常有助於發現邏輯和程序流程的問題。 –

我同意Asad。但我想我基本上在這裏丟失了一些東西，li標籤被生成並立即關閉。 –

您不能將部分元素添加到dom。 – Musa

有你的代碼的幾個問題：

你並不需要附加結束標記; jQuery處理元素的DOM表示，而不是標記。
#trendcontent是<div>，而你不應該<li>元素添加到<div>（使用無序列表<ul>或有序列表<ol>）
即使#trendcontent是一個清單，你直接插入<img />元素融入它與<li>元素交替。這是無效的HTML。你的圖片應該去哪裏取決於你的要求，但它們當然不應該是<li>元素的兄弟姐妹。

來源

2013-08-19 21:52:54

你應該鏈中的孩子送到每個追加，你不能追加一半的元素，所以嘗試這樣的事情

$('#trendcontent').append(
    $('<li>').append(
     $('<div>').attr('class','product-wrapper').append(
      $('<div>').attr('class', 'image-wrapper').append(
       $("<img>").attr("src", item.Image) 
      ) 
     ) 
    ) 
);

至於別的地方規定，確保#trendcontent是UL，而不是DIV。

來源

2013-08-19 21:53:39 MikeD

在JQuery中動態創建LI

回答

相關問題