Как получить живые коллекции DOM с помощью jQuery?

Question

Как получить доступ к живым коллекциям DOM из jQuery?

Возьмем, к примеру, этот 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 id='a'>, потому что divs - это живая коллекция.

Есть ли в jQuery что-нибудь, чем я мог бы заменить вторую строку, чтобы получить тот же результат?

var divs = $('#a div'); приводит к бесконечному циклу.

JSFiddle здесь .

Answer 1

Живые коллекции - настоящие, которые не могут быть возвращены современным jquery.Более того, современный метод, который призван заменить в ближайшем будущем getElementsByTagName, getQuerySelectorAll, также возвращает статическую коллекцию.

Это ответ на заданный вами вопрос.Что касается вопроса, который вы действительно хотели задать, другие пользователи уже пытались оказать вам некоторую помощь.

Answer 2

Если #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 3

Как получить живые коллекции DOM с помощью jQuery?

Это невозможно.

Это имеет тот же эффект, что и ваш пример кода, хотя:

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 4

Выберите элемент каждый раз, это создаст новый объект 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 5

Синтаксис, который вы ищете:

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

Поскольку идентификаторы должны быть уникальными, вы можете просто сделать:

var divs = $('#a');

Answer 6

Это всегда 20 детей?

Не лучше ли использовать следующее

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