Question

我正在使用html +=在for循环中将html写入DOM。

根据循环中当前项目的ID，有时我不想写一个新项目，而是附加刚写入的项目的一部分。

这就是我正在尝试但不应该追加的东西。我可以这样做，还是有更好的方法？

var html = '';
var i=0, length=data.length, image;

var lastID = '';

for(; i<length; i++) {

image = data[i];

    if(image.itemID!=lastID){   

        html += '<li>';
        html += '<div id="holder'+image.itemID+'">';
        html += '<div class="row">'+image.comment+'</div>';
        html += '</div>';
        html += '</li>';

    } else {

       $('#holder'+image.itemID).append('<div class="row">'+image.comment+'</div>');

    }

var lastID = image.itemID;

}

$('#display').append(html);

Answer 1

else部分中的代码不起作用，因为先前创建的div尚未在DOM中。只要它不在DOM中，就不可能找到它来查询DOM模型，例如用jQuery。

除非性能有问题，否则您可以在创建DOM后立即将li个元素插入DOM，而不是一次性完成所有操作。这样您就可以找到以前创建的元素并将内容附加到它们：

var i=0, length=data.length, image;

var lastID = '';

for(; i<length; i++) {

    image = data[i];

    if(image.itemID!=lastID){   

        var html = '<li>';
        html += '<div id="holder'+image.itemID+'">';
        html += '<div class="row">'+image.comment+'</div>';
        html += '</div>';
        html += '</li>';

        $('#display').append(html);

    } else {

       $('#holder'+image.itemID).append('<div class="row">'+image.comment+'</div>');

    }

    var lastWish = image.wishlist_id;
}

<强>更新即可。实际上，您可以在将新创建的html插入DOM之前查询甚至操作它们。 jQuery足够好地处理像$(html).find('selector')这样的场景：

var html = ''
var i=0, length=data.length, image;

var lastID = '';

for(; i<length; i++) {

    image = data[i];

    if(image.itemID!=lastID){   

        html += '<li>';
        html += '<div id="holder'+image.itemID+'">';
        html += '<div class="row">'+image.comment+'</div>';
        html += '</div>';
        html += '</li>';

    } else {

       $(html).find('#holder'+image.itemID).append('<div class="row">'+image.comment+'</div>');

    }

    var lastWish = image.wishlist_id;
}

$('#display').append(html);

Answer 2

Append将jQuery对象作为参数。所以正确的语法是：

$('#display').append($(html));

Answer 3

这是一个如何使用DOM外部的临时元素来管理新创建的元素的示例。

for(var i       = 0,
        length  = data.length,
        $el     = $('<ul>'),
        lastId, image; i < length; i++) {

    image = data[i];

    if(image.itemID !== lastId) {
        $el.append('<li><div id="holder' + image.itemID +
            '"><div class="row">' + image.comment + '</div></div></li>');
    } else {
        $el.find('#holder' + image.itemID).append('<div class="row">' + image.comment + '</div>');
    }

    lastId = image.itemID; // is that right?! cause you need to set lastId somewhere..
}

$('#display').append($el.children());

问题可能是因为您尝试从DOM中获取元素（'#holder' + image.itemID），然后再将其附加到它。

在写入DOM之前附加div

3 个答案: