CODEWITHSUNDEEP
domconcatenationjquery
Gajus
Gajus

Reputation: 73808

concatenating jQuery objects

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.

Upvotes: 3

Views: 2858

Answers (3)

xec
xec

Reputation: 18024

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/

Upvotes: 2

LukeGT
LukeGT

Reputation: 2352

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.

Upvotes: 0

avani gadhai
avani gadhai

Reputation: 460

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

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

Upvotes: 0

Related Questions