jQuery .append (function (index, html) {...}) Question

Question

Disons que nous avons cette non identifiée DIV

<div class="class-occurs-many-times-on-page">foo</div> 

et nous voulons placer juste après une autre DIV non identifié qui contient des dizaines ou des centaines d'éléments SPAN:

<div class="a-class-that-occurs-many-times-on-page">foo</div> 
<div class="another-class-that-occurs-many-times-on-page"> 
     <span class="latin">lorem</span><span class="latin">ipse</span> 
     <span class="swedish-chef">føø</span><span class="swedish-chef">bår</span> 
     . 
     . 
     . 
     <span>...</span> 
</div> 

et nous avons ajouté le premier DIV non identifié et que vous voulez ajouter le SPAN-conteneur DIV ainsi:

values = [{word: "lorem", cls: "latin"}, {word: "ipse", cls: "latin"}, 
{word:"føø",cls:"swedish-chef"}, {word:"bår",cls:"swedish-chef"}]; 

$("#" + someParentElement).append(
    $("<div></div>").addClass("a-class-that-occurs-many-times-on-page").text("foo").after(

      $("<div></div>").addClass("another-class-that-occurs-many-times-on-page").append(
       function(index, html){      
        // how to wrap each value in the values array in a span 
        // and inject each of those spans into this DIV? 

       } 
      ) 

    ) 


); 

Cette approche est-elle possible? Dans l'affirmative, que doit faire la fonction de l'appel de la méthode .append() à chaque itération du tableau de valeurs, si le but est d'envelopper chacune des valeurs du tableau un SPAN et injecter cette envergure dans le conteneur?

Merci

Answer 1

values = [{word: "lorem", cls: "latin"}, {word: "ipse", cls: "latin"}, {word:"føø",cls:"swedish-chef"}, {word:"bår",cls:"swedish-chef"}], 
len = values.length, 
$ctn = $('<div/>', { 
    class: 'another-class-that-occurs-many-times-on-page' 
}), 
buildarr = []; 

while(len--){ 
    buildarr.push('<span>'); 
    buildarr.push(values[len].word); 
    buildarr.push(values[len].cls); 
    buildarr.push('</span>'); 
} 

$ctn.append(buildarr.join('')).appendTo(document.body); 

qui est juste une suggestion que vous pourriez accomplir ce genre de tâche. Il suppose que l'ordre dans lequel nous devons remplir le tableau est irrelavant (en bouclant avec le moyen le plus rapide, reversed while). Si la commande est importante, utilisez un standard for loop.