Question

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.

Answer 1

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