如何使用jQuery获取DOM实时集合？

Question

如何从jQuery访问实时DOM集合？

以此HTML <div id='a'></div>和此JavaScript代码为例：

var a = $('#a');
var divs = a[0].getElementsByTagName('DIV');
for(var i=0; divs.length < 20; ) {
    a.append($('<div>'+(i++)+'</div>'));
}

它会将20个div子项追加到<div id='a'>，因为divs是一个直播集合。

jQuery中有什么东西可以替换第二行来获得相同的结果吗？

var divs = $('#a div');导致无限循环。

JSFiddle是here。

Answer 1

如果#a已包含div：

var $a = $('#a'),
    toAdd = Math.max(20 - $a.find('div').length, 0);

for (var i = 0; i < toAdd; i++) {
    $a.append('<div>' + i + '</div>');
}

这相当于上面的代码。

Answer 2

Live Collections - 真正的集合，不是现代jquery可以返回的东西。 此外，现代方法旨在取代最近的getElementsByTagName，getQuerySelectorAll也返回一个静态集合。

这是你说过的问题的答案。 至于你真正想问的问题，其他用户已经试图为你提供一些帮助。

Answer 3

每次选择元素，这将创建一个新的jQuery对象。我觉得这是元素发生变化的唯一方法。

var a = $('#a');

for(var i=0; $('#a div').length < 20; ) {
    a.append($('<div>'+(i++)+'</div>'));
    if(i==50) break;
}

编辑： 或者这个：

for(var i=0, a=$('#a'); a.children('div').length < 20; ) {
    a.append($('<div>'+(i++)+'</div>'));
    if(i==50) break;
}

或者这只是一个选择器：

var a = $('#a');
var length = a.children('div').length;

while(length < 20) {
        a.append($('<div>'+(length++)+'</div>'));
}

Answer 4

  

如何使用jQuery获取DOM实时馆藏？

那是不可能的。

这与示例代码具有相同的效果：

var $a = $('#a');

for (var i = 0; i < 20; i++) {
    $a.append('<div>' + i + '</div>');
}

http://jsfiddle.net/mathias/Af538/

更新：如果代码需要定期重复，您可以使用以下内容：

var $a = $('#a'),
    toAdd = Math.max(20 - $('div', $a).length, 0),
    i;

for (i = 0; i < toAdd; i++) {
    $a.append('<div>' + i + '</div>');
}

http://jsfiddle.net/mathias/S5C6n/

Answer 5

总是20个孩子吗？

使用以下

是不是更好

var a = $('#a div');
for(var i=0; i < 20; i++) {
    a.append($('<div>'+(i)+'</div>'));
}

Answer 6

您正在寻找的语法是：

var divs = $('div#a');

由于ID应该是唯一的，您可以这样做：

var divs = $('#a');