JQuery addieren oder schneiden
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 div
s. Es sollte 3 zusammenwickeln, also sollte ich 3 neue haben div
s mit 3 in den ersten 2 und 2 im letzten, da es nur 8 gibt div
s. Ich bekomme jedoch 3 div
s im ersten neuen div
, dann die nächsten 2 div
s sind überhaupt nicht verpackt und dann die letzten 3 div
s 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?
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