jQuery-Indexselektoren

Question

Ich versuche, 4 meiner Bildcontainer in einem neuen Fenster mit insgesamt 16 Bildern zu platzieren. Die jQuery unten ist, was ich dazu gemacht habe. Das erste Fenster erscheint korrekt mit 4 Bildern. Aber die Sekunde hat 4 Bilder, plus die 3. Scheibe. Und das 3. Fenster hat 4 Bilder plus das 4. Fenster. Ich weiß nicht genau, warum die Verschachtelung stattfindet. Mein Wrapping kann nicht dazu führen, dass sich der Index ändert. Ich habe CSS-Rahmen hinzugefügt und es scheint korrekt indiziert zu sein. Wie soll ich das machen? Was ich will, ist 1-4 in einer Scheibe, 5-8 in einer anderen, 9-12 und 13-16. Es muss dynamisch sein, damit ich die Anzahl in jedem Bereich ändern kann. Es ist also keine Option, dies im HTML-Code zu tun.

Eine Demo des Problems kann hier gesehen werden: http://beta.whipplehill.com/mygal/rotate.html. Ich benutze Firebug, um das DOM zu sehen.

Jede Hilfe wäre splntabulous!

Der jQuery-Code

$(function() { 
    $(".digi_image:gt(-1):lt(4)").wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid red"); 
    $(".digi_image:gt(3):lt(8)").wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid blue"); 
    $(".digi_image:gt(7):lt(12)").wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid green"); 
    $(".digi_image:gt(11):lt(16)").wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid orange"); 
    $(".digi_pane").append("<div style=\"clear: both;\"></div>"); 
}); 

Die HTML (abgekürzt), aber im Wesentlichen 16-mal wiederholt.

<div class="digi_image"> 
    <div class="space_holder"><img src="images/n883470064_4126667_9320.jpg" width="100" /></div> 
</div> 

Answer 1

Ich denke, das Problem der Nutzung des gt ist() und lt() Selektoren. Sie sollten stattdessen slice() nachschlagen.

Schauen Sie sich diesen Beitrag: http://docs.jquery.com/Traversing/slice

Answer 2

Für diejenigen, die neugierig sind ... das ist, was ich tat.

$(".digi_image").slice(0, 4).wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid red"); 
$(".digi_image").slice(4, 8).wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid blue"); 
$(".digi_image").slice(8, 12).wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid green"); 
$(".digi_image").slice(12, 16).wrapAll("<div class=\"digi_pane\"></div>").css("border", "2px solid orange"); 
$(".digi_pane").append("<div style=\"clear: both;\"></div>"); 

Und es funktioniert genau, wie ich es brauche. Könnte vielleicht ein bisschen effizienter gemacht werden, aber es funktioniert.