0

我正在使用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);
4

3 回答 3

1

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

除非存在性能问题，否则您可以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 之前查询甚至操作它。$(html).find('selector')jQuery 可以很好地处理这样的场景：

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);
于 2013-03-19T12:45:42.930 回答
0

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

$('#display').append($(html));
于 2013-03-19T12:45:03.647 回答
0

这是一个如何使用 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());

'#holder' + image.itemID问题可能是因为您在将元素附加到 DOM 之前尝试从 DOM 获取元素 ( )。

于 2013-03-19T12:45:58.623 回答