Jquery and clone html sections?

Question

I have this template div

<div class="divDetails">
    <div class="divRowData" style="display: none "> 
          <span class="spanColor"></span>
          <span class="spanText"></span>
    </div>
</div>

It is hidden.

I have an object array and I need to duplicate divRowData with the injected data from array. ( and make each new section visible ).

But it seems my jquery code is a bit of a mess and I'm looking for a shorter way of doing it.

Currently I do :

 for (var i = 0; i < arrData.length; i++)
           {
               var thediv = $(".divDetails>.divRowData:first").clone().css('display','block');
               var g = thediv.find(".spanColor").css('background-color', 'color'+i);
               var g = thediv.find(".spanText").text(arrData[i].text);
               thediv.appendTo(".divDetails");

           }

How can I shorten this code ?

http://jsbin.com/etudak/1/edit

_{I know I can use templates but that's another story.}

Johan · Accepted Answer · 2013-01-17 12:42:44Z

3

$.each(arrData, function(i, v){

    $(".divDetails>.divRowData:first")
     .clone()
     .show()
     .find(".spanColor").css('background-color', 'color'+i)
     .end()
     .find(".spanText").text(v.text)
     .end()
     .appendTo(".divDetails");

});

Since some traversing is necessary I couldn't get it shorter than this. But at least it's a chained example ;)

answered Jan 17, 2013 at 12:42

Johan

35.4k62 gold badges191 silver badges309 bronze badges

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

2 Comments

Royi Namir Over a year ago

They both seems to work ....and I couldnt understand the differnce between them ...:-(

Johan Over a year ago

@RoyiNamir "As described in the discussion for .end(), jQuery objects maintain an internal stack that keeps track of changes to the matched set of elements. When one of the DOM traversal methods is called, the new set of elements is pushed onto the stack. If the previous set of elements is desired as well, .andSelf() can help."

Christofer Eliasson · Accepted Answer · 2013-01-17 12:41:41Z

1

Perhaps, you can't shorten the code all that much, if you don't want to use a template, but you have a few things that you could fix anyway.

You don't need to save the element to a variable g, since you don't use that variable for anything.
You need to fix the background-color property, since color1 will not be a valid background-color value.
The jQuery method can take a second parameter which is the context to search within, so thediv.find(".spanColor") could be shortened to $(".spanColor", thediv), which might not be much shorter, but a bit more readable in my opinion.
You can replace .css('display','block') with the .show() method.

All-in-all, something like this perhaps:

for (var i = 0; i < arrData.length; i++)
{
    var thediv = $(".divDetails>.divRowData:first").clone().show();

    $(".spanColor", thediv).css('background-color', '#fc0');
    $(".spanText", thediv).text(arrData[i].text);

    $(".divDetails").append(thediv);
}

edited Jan 17, 2013 at 12:41

answered Jan 17, 2013 at 12:32

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

3 Comments

Royi Namir Over a year ago

color-i is just a sample of placing data. you right about the [g] stuff anyway

Royi Namir Over a year ago

what about this thediv.find(".spanColor").css('background-color', 'color'+i).andSelf().find(".spanText").text(arrData[i].text);

Christofer Eliasson Over a year ago

@RoyiNamir If you swap .andSelf() to .parent() that would work, but I believe it gets a bit harder to read.

Collectives™ on Stack Overflow

Jquery and clone html sections?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related