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

Question

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

以此 HTML

和此 JavaScript 代码为例：

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

它将向

因为 divs 是一个实时集合。

jQuery 中是否有任何内容可以替换第二行以获得相同的结果？

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

JSFiddle 位于此处。

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 div 孩子吗？

使用下面的不是更好吗

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');