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.

Not a duplicate since I do not have an initial "selection", which is the main problem essentially. — Gajus
– Gajus, Commented May 8, 2012 at 12:46
Then create an empty selection: var entry_set = $(). See also Getting an empty JQuery object — Felix Kling
– Felix Kling, Commented May 8, 2012 at 12:52
@FelixKling, you should have posted this as an answer, because that's the missing bit I was asking about. — Gajus
– Gajus, Commented May 8, 2012 at 12:55

xec · Accepted Answer · 2012-05-08 13:39:45Z

2

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/

edited May 8, 2012 at 13:39

answered May 8, 2012 at 13:22

xec

18.1k3 gold badges50 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

avani gadhai · Accepted Answer · 2012-05-08 12:47:39Z

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 8, 2012 at 12:47

avani gadhai

4602 silver badges12 bronze badges

Comments

LukeGT · Accepted Answer · 2012-05-08 12:48:29Z

0

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.

answered May 8, 2012 at 12:48

LukeGT

2,3521 gold badge21 silver badges20 bronze badges

Collectives™ on Stack Overflow

concatenating jQuery objects

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related