Question

I have a loop:

for (index = 0; index < total_groups; index += 1) {

    groups[index].list_item = $(list_item_snippet);

    // Closure to bind the index for event handling
    (function (new_index) {

        groups[index].list_item.find('.listing-group-title')
                               .html(groups[index].Group.Name)
                               .click(function(e){

            fns.manageActiveGroup(new_index, groups);
            return false;
        });

    })(index);

    // Append to DOM
    mkp.$group_listing.append(groups[index].list_item);
};

I would rather not call append() each time the loop fires.

I know that I could use a String and concatenate the markup with each loop iteration and append the string to mkp.$group_listing at the end, however this flattens the object and the bindings are lost (I am not relying on IDs).

Is there a way to perhaps add my objects to an array and append them all in one go at the bottom without flatening to HTML?

Assumptions:

• $(list_item_snippet) contains some HTML defining a list item (and includes an element with class .listing-group-title).
• groups is a block of JSON defining a ‘group’ in my script
• The closure works perfectly

Edit:

Found that I can use the following syntax to append multiple elements:

mkp.$group_listing.append(groups[0].list_item, groups[1].list_item );

But i obviously need to automate it – it’s not an array it’s just optional additional function parameters so I’m not sure how to do this.

Answer 1

To append an array of elements to a selector you can use this:

$.fn.append.apply($sel, myArray);

In your case, since it’s actually the .list_item property of each array element that you need you can use $.map to extract those first:

$.fn.append.apply(mkp.$group_listing, $.map(groups, function(value) {
     return value.list_item;
}));