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.}

Answer 1

$.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 😉