concatenating jQuery objects

Question

Below is the prototype of what I am trying to do.

var entry_set   = $;

// start to loop data
for([])
{
    // create HTML element to represent that data
    $('<div></div>')
        .data([])
        .addClass([])
        .on([])
        .insertAfter(entry_set);
}

// modify DOM only once all the entries are consolidated to a single jQuery object
entry_set.appendTo('.entries');

The comments say it all. In short - the idea is to modify document DOM only once when inserting data. I would usually go HTML string approach (simply concatenating the same structure using a string), but I am interested whether anything similar to this might work as well.

possible duplicate of [Merging two jQuery selections](http://stackoverflow.com/questions/2400797/merging-two-jquery-selections) — Felix Kling, May 08 '12 at 12:45
Not a duplicate since I do not have an initial "selection", which is the main problem essentially. — Gajus, May 08 '12 at 12:46
Then create an empty selection: `var entry_set = $()`. See also [Getting an empty JQuery object](http://stackoverflow.com/questions/897331/getting-an-empty-jquery-object) — Felix Kling, May 08 '12 at 12:52
@FelixKling, you should have posted this as an answer, because that's the missing bit I was asking about. — Gajus, May 08 '12 at 12:55

xec · Accepted Answer · 2012-05-08T13:39:45.117

You could create an empty DOM element and .append() to that

var entry_set = $("<div>"); //empty dom element

// start to loop data
var i = 4;
while(i--) {
    // create HTML element to represent that data
    var item = $('<div>', {
        text: "test " + i
    });
    entry_set.append(item);
}

// modify DOM only once all the entries are consolidated to a single jQuery object
$("body").append(entry_set.children());

working demo at: http://jsfiddle.net/F2J6g/1/

EDIT You can also start with an empty collection and use .add()

var entry_set = $(); //empty collection

// start to loop data
var i = 4;
while(i--) {
    // create HTML element to represent that data
    var item = $('<div>', {
        text: "test " + i
    });
    entry_set = entry_set.add(item);
}

// modify DOM only once all the entries are consolidated to a single jQuery object
$("body").append(entry_set);

http://jsfiddle.net/F2J6g/2/

score 0 · Answer 2 · answered May 08 '12 at 12:47

0

@Guy, I don't think you will get the desired HTML output. try using "wrap". Sample Syntax:

$('.OuterDiv').wrap('<div class="abc" />');

answered May 08 '12 at 12:47

avani gadhai

460
2
12

score 0 · Answer 3 · answered May 08 '12 at 12:48

Unfortunately, because those objects aren't actually attached to any heirarchy, calling insertAfter doesn't actually mean anything. What you'll need to do is put them inside a containing div, maybe something like this:

var entry_set = $('<div>');

// start to loop data
for([])
{
    // create HTML element to represent that data
    $('<div></div>')
        .data([])
        .addClass([])
        .on([])
        .appendTo(entry_set);
}

// modify DOM only once all the entries are consolidated to a single jQuery object
entry_set.appendTo('.entries');

I haven't tested that, but I think it should work.

concatenating jQuery objects

3 Answers3