jquery - 在 Jquery 中动态创建 LI

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是 a <div>，并且您不应该向<li>a 添加元素<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。