Frage

Ich versuche, eine bestimmte Anzahl von Elementen in a zu wickeln div. Das Problem ist, dass die Anzahl der Elemente je nach Eingabe des Benutzers variieren kann. Die Anzahl der Elemente könnte also 2, 3, 4 oder noch mehr betragen. Ich habe eine Variable, die mir sagt, wie viele Elemente verpackt werden sollten. Zum Beispiel kann meine Seite Folgendes haben:

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

Jetzt muss ich diese in einen anderen einwickeln div Basierend auf meiner Variablen. Wenn meine Variable einen Wert von 3 enthält, würde dies so aussehen:

   <div class="testing"> 
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>   
   </div>

   <div class="testing">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
   </div>

Ich habe diesen Code verwendet:

$(this).add($(this).next())
       .add($(this).next().next())
       .wrapAll('<div class="testing"></div>');

Das Problem dabei ist, dass ich wissen müsste, wie viele Elemente da sein werden. Gibt es eine dynamische Möglichkeit, dies zu tun? Ich habe auch das gesehen slice Funktion und versucht, es so zu verwenden:

for(var i=0;i<img_cnt;i+=img_row){
    obj.children().slice(i,i+img_row).wrapAll('<div class="row"></div>');
}

Es funktioniert jedoch nicht. Ich habe 8 divs. Es sollte 3 zusammenwickeln, also sollte ich 3 neue haben divs mit 3 in den ersten 2 und 2 im letzten, da es nur 8 gibt divs. Ich bekomme jedoch 3 divs im ersten neuen div, dann die nächsten 2 divs sind überhaupt nicht verpackt und dann die letzten 3 divs sind in einen neuen gewickelt div. Ich bin mir nicht sicher, warum es es nicht richtig einpackt. Haben Sie Ideen, wie Sie dies tun oder sogar eine bessere Methode?

War es hilfreich?

Lösung

Ihr Code funktioniert nicht, weil children verändert sich. Versuchen Sie es zu verwenden slice auf einem konstanten Satz:

var all = $('.test'); 
for(i=0; i < all.length; i += img_row) {
   all.slice(i, i + img_row).wrapAll('<div class="row" />'); 
}

Beispiel: http://jsbin.com/upaji

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top