Question

我有一个ajax调用，它根据返回的内容创建一个列表：

$.ajax({
    type: "POST",
    url: "Home/FillTags",
    data: "{ 'mydataishere' }",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
     $('.placetags').html('');
     $('.placetags').append("<div class=\"tags\">");
        var i = 0;           
        $.each(msg, function () {
            $('.placetags').append("<li><a href='javascript:void(0)' onclick=\"fnKeyWordSearch({'type' : '2' , 'tag' : '" + msg[i].TagID + "'});\"> " + msg[i].Tag + "</a></li>");
            i++;
        });
     $('.placetags').append("</div>");
    }
});

ajax正在返回正确的列表，这就是我想要看作呈现的HTML：

<div class="placetags">
  <div class="tags">
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </div>
</div>

但是......这就是我得到的......

<div class="placetags">
  <div class="tags"></div>
    <li>...</li>
    <li>...</li>
    <li>...</li>    
</div>

我不明白为什么.tags div在放入<li>之前被关闭。我的css写的是期待<li>内部.tags的样式，我不明白为什么会发生这种情况。

Answer 1

只是一个不合适的嵌套，试试这个：

$('.placetags').append("<div class=\"tags\">");
    var i = 0;           
    $.each(msg, function () {
        $('.tags').append("<li><a href='javascript:void(0)' onclick=\"fnKeyWordSearch({'type' : '2' , 'tag' : '" + msg[i].TagID + "'});\"> " + msg[i].Tag + "</a></li>");
        i++;
    });

Answer 2

这是因为对.append（）的每个（！）调用都会添加一个完整的HTML元素，包括其内容和结束标记！

如果你想避免这种情况，你必须先创建要附加的完整HTML，然后在HTML完成时才使用.append（）。

Answer 3

您需要将它附加到刚刚创建的div中...而不是再次将容器div添加到

$('.placetags').append("<div class=\"tags\" />"); // <-- make sure you close or it breaks in IE
        var i = 0;           
        $.each(msg, function () {
            $('.placetags div.tags').append("<li><a href='javascript:void(0)' onclick=\"fnKeyWordSearch({'type' : '2' , 'tag' : '" + msg[i].TagID + "'});\"> " + msg[i].Tag + "</a></li>");
            i++;
        });

来自jquery ajax的列表没有正确显示

3 个答案: