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

您的代码存在一些问题：

您无需附加结束标记; jQuery处理元素的DOM表示，而不是标记。
#trendcontent是<div>，您不应该将<li>元素添加到<div>（使用无序列表<ul>或有序列表<ol>）
即使#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。

在Jquery中动态创建LI

2 个答案: