Question

我正在尝试将li附加到li中包含多个类的类。

所以我的HTML代码是：

<div class="maincontent">
   <ul>

    <div class="content">

    <div>

   </ul>
</div>

和jQuery：

$.getJSON(url, function(data) { 
    $.each(data, function(n, newData) {
      $(".content")
        .append("<li class='my-li-class'>")
        .append("<div class='imageclass'><img src='"+newData.img+"' class='innerimageclass'></div>")
        .append("<div class='another-inner-div'>")  
        .append("<div class='main-title'>"+newData.title+"</div>")  
        .append("</div>")   
        .append("</li>");
    });
});

我正在读取json的数据。 json数据很好。如果我只使用1个附加并在其中添加整个代码，我可以正确显示数据。但代码看起来很糟糕。所以我想把它分解成每一行看起来不错。我做了一些错误的追加。请帮忙。

感谢。

Answer 1

追加<li>不附加HTML字符串，它附加一个新元素，可以打开和关闭。所以你的div不在列表项中。由于您拥有整个HTML树，因此只需.append()即可：

$.getJSON(url, function(data) { 
    $.each(data, function(n, newData) {
      $(".content").append(
        "<li class='my-li-class'>" + 
        "<div class='imageclass'><img src='"+newData.img+"' class='innerimageclass'></div>" + 
        "<div class='another-inner-div'>" + 
        "<div class='main-title'>"+newData.title+"</div>" +
        "</div>" +  
        "</li>");
    });
});

Answer 2

当我们追加一个元素时，它会被添加到DOM树中，所以如果我们检查你的代码，

$.getJSON(url, function(data) { 
    $.each(data, function(n, newData) {
      $(".content")
        .append("<li class='my-li-class'>")
        .append("<div class='imageclass'><img src='"+newData.img+"' class='innerimageclass'></div>")
        ....
    });
});

你做的时间

$(".content")
        .append("<li class='my-li-class'>")

HTML已更改为

<div class="content">
    <li class='my-li-class'></li>
<div>

li

中不会发生下一个追加

有多种方法可以做到，

创建一个变量并将其附加到div.content。

var htmlData = "<li class='my-li-class'>" + 
    "<div class='imageclass'><img src='"+newData.img+"' class='innerimageclass'></div>" + 
    "<div class='another-inner-div'>" + 
    "<div class='main-title'>"+newData.title+"</div>" +
    "</div>" +  
    "</li>");

或者如果你真的想让它真的干净，可以使用createElement和相关函数分别创建每个元素，最后将它添加到div.content。

Answer 3

请注意：将多个项目作为单个字符串附加比显着更快，而不是一次追加多个项目。您需要重新编写代码以创建单个HTML字符串并在最后添加一次。

e.g。

$.getJSON(url, function(data) { 
    var html = "";
    $.each(data, function(n, newData) {
      html +=
        "<li class='my-li-class'>" + 
        "<div class='imageclass'><img src='"+newData.img+"' class='innerimageclass'></div>" + 
        "<div class='another-inner-div'>" + 
        "<div class='main-title'>"+newData.title+"</div>" +
        "</div>" +  
        "</li>");
    });
    $(".content").append(html);
});

或使用.html()

$(".content").html(html);

如评论中所述，DIV不是UL的有效孩子，因此您需要定位UL：

$(".content").parent().append(html);

或者向UL添加一个类而不是直接定位它。

什么是正确的语法来向jQuery追加一个包含多个类的列表？

3 个答案: