selectores de índice jQuery

Question

Eu estou tentando colocar 4 da minha imagem recipientes em um novo painel, com um total de 16 imagens. O jQuery abaixo é o que eu vim com a fazê-lo. O primeiro painel sai corretamente com 4 imagens na mesma. Mas o segundo tem 4 imagens, além do 3º painel. Eo 3º painel tem 4 imagens mais o quarto painel. Eu não sei exatamente por que o assentamento está ocorrendo. Meu envolvimento não pode estar causando o seu índice de mudança. Eu adicionei fronteiras css para eles e parece ser indexados corretamente. Como eu deveria estar lidando com isso? O que eu quero é ter 1-4 em um painel, 5-8 em outro, 9-12 e 13-16. Ele precisa ser dinâmico para que eu possa alterar o número em cada painel, por isso fazê-lo no HTML não é uma opção.

A demo do problema pode ser visto aqui: http://beta.whipplehill.com/ MyGAL / rotate.html . Estou usando firebug para ver o DOM.

Qualquer ajuda seria splentabulous!

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

O HTML (abreviado), mas essencialmente repetido 16 vezes.

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

Answer 1

Eu acho que o problema é o uso do () seletores gt () e lt. Você deve olhar para cima fatia () em vez.

Confira este post: http://docs.jquery.com/Traversing/slice

Answer 2

Para aqueles que estão curiosos ... isto é o que eu fiz.

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

E funciona exatamente como eu preciso dele para. Provavelmente poderia ser feito um pouco mais eficiente, mas funciona.