jQuery append() for multiple elements after for loop without flattening to HTML

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

Answer 2

Instead of bind it the way you've done, if you bind it using on() like below,

$(document).on('click', '.listing-group-title', function() {
    // click handler code here
});

You can flatten the HTML and append it in one statement and it'll still work.

Note: For better efficiency, replace document in the above statement to a selector matching the closest parent of .listing-group-title

Answer 3

Yes. Use the jQuery add method to add all your items to a jQuery object. Then append that one object.

http://api.jquery.com/add/

EDIT: Example:

var arr = $();

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) {
        ...
    })(index);

    // Add to jQuery object.
    arr.add(groups[index].list_item));
};

mkp.$group_listing.append(arr);