jQuery selectores de índice

Question

Estoy tratando de colocar 4 de mis contenedores de imágenes en un nuevo panel, con un total de 16 imágenes. El jQuery a continuación es lo que se me ocurrió para hacerlo. El primer panel sale correctamente con 4 imágenes. Pero el segundo tiene 4 imágenes, más el tercer panel. Y el tercer panel tiene 4 imágenes más el 4 ° panel. No sé exactamente por qué está ocurriendo la anidación. Mi envoltorio no puede estar causando que su índice cambie. Agregué bordes CSS a ellos y parece estar indexado correctamente. ¿Cómo debería ir sobre esto? Lo que quiero es tener de 1 a 4 en un panel, de 5 a 8 en otro, de 9 a 12 y de 13 a 16. Debe ser dinámico para poder cambiar el número en cada panel, por lo que simplemente hacerlo en el HTML no es una opción.

Se puede ver una demostración del problema aquí: http://beta.whipplehill.com/mygal/rotate.html. Estoy usando firebug para ver el DOM.

¡Cualquier ayuda sería espléndida!

El Código jQuery

$(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>"); 
}); 

El HTML (abreviado), pero repitió esencialmente 16 veces.

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

Answer 1

Creo que su problema es su uso de los selectores gt() y lt(). Deberías buscar slice() en su lugar.

Control hacia fuera este mensaje: http://docs.jquery.com/Traversing/slice

Answer 2

Para aquellos que son curiosos ... esto es lo que hice.

$(".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>"); 

Y funciona exactamente como lo necesito. Probablemente podría hacerse un poco más eficiente, pero funciona.