Question

Look at following hypothetic code:

// create some list we work with
$('body').html('<ul class="collection-list"></ul>');

// some array with string data
var collection = ['foo', 'bar', 'foobar'];

// here we store our jquery objects
var doms = [];

// for each item in the collection array we create a li
$.each(collection, function(index, value) {
    // imagine that the jquery part would return a reference/object which we push into our doms array
    doms.push($('ul.collection-list').append('<li class="item">' + value + '</li>'));
});

// we could now do different logic through our cached object
doms[2].val('new value');
doms[1].remove();

It could be that the example doesn’t make any logical sense but please don’t show me alternatives! I just want to use the presented technique. The example is just an example!

Answer 1

Your storing the entire ul element in the loop not the individual lis so do you mean;

$.each(collection, function(index, value) {
    doms.push($('<li class="item">' + value + '</li>'));
    $('ul.collection-list').append(doms[index]);
});

doms[2].html('new 3rd li value');