Динамическое создание LI в JQuery

Question

$.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, однако списки не сформированы должным образом. Любые предложения/помощь?

Answer 1

Есть несколько проблем с кодом:

1. Вам не нужно добавлять закрывающие теги; jQuery обрабатывает DOM-представления элементов, а не разметку.
2. #trendcontent является <div>, и вы не должны добавлять <li> элементы к <div> (использовать неупорядоченный список <ul> или нумерованный список <ol>)
3. Даже если #trendcontent был список, вы вставив <img /> элементы непосредственно в он, чередующийся с элементами <li>. Это недопустимый HTML. Где ваши изображения должны идти, зависит от ваших требований, но они, разумеется, не должны быть братьями и сестрами из <li> элементов.

Answer 2

Вы должны приковать ребенок прочь каждое добавление, вы не можете добавить половину элемента, поэтому попробовать что-то вроде этого

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

Как указано еще где, убедитесь, что #trendcontent является UL, а не DIV.