How do I get access to live DOM collections from jQuery?

Take for example this HTML <div id='a'></div> and this JavaScript code:

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

It will append 20 div children to <div id='a'> because divs is a live collection.

Is there anything in jQuery that I could replace the second line with to get the same result?

var divs = $('#a div'); results in infinite loop.

JSFiddle is here.

How do I get access to live DOM collections from jQuery?

Take for example this HTML <div id='a'></div> and this JavaScript code:

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

It will append 20 div children to <div id='a'> because divs is a live collection.

Is there anything in jQuery that I could replace the second line with to get the same result?

var divs = $('#a div'); results in infinite loop.

JSFiddle is here.

• javascript
• jquery
• dom

6 Answers 6

In case #a already contains divs:

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

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

That would be equivalent to the code above.

Live Collections - the true ones, are not something which can be returned by modern jquery. Moreover, modern method which is intended to replace in nearest future getElementsByTagName, getQuerySelectorAll also return a static collection.

This is the answer to question you've stated. As for the question you've really wanted to ask, other users already tried to provide you some help.

Select the element each time, this will create a new jQuery object. Which I think it the only way if the element is changing.

var a = $('#a');

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

EDIT: Or this:

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

Or this, just one selector:

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

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

How to get DOM live collections with jQuery?

That’s not possible.

This has the same effect as your example code, though:

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

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

http://jsfiddle/mathias/Af538/

Update: If the code needs to be repeated periodically, you could use something like this:

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/mathias/S5C6n/

Is it always 20 div children ?

Isn't it better to use the following

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

The syntax you're looking for is:

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

Since IDs are supposed to be unique, you could just do:

var divs = $('#a');