Javascript jQuery索引选择器

我正在尝试将4个图像容器放入一个新窗格中，总共有16个图像。下面的jQuery就是我想到的实现它的方法。第一个窗格正确显示，其中包含4个图像。但是第二个有4个图像，加上第三个窗格。第三个窗格有4个图像加上第四个窗格。我不知道筑巢的确切原因。我的包装不会导致他们的索引改变。我给它们添加了css边框，看起来索引正确。我该怎么办？我想要的是一个窗格中有1-4个，另一个窗格中有5-8个，9-12个和13-16个。它需要是动态的，以便我可以更改每个窗格中的数字，所以在HTML中这样做不是一个选项

可以在此处看到该问题的演示：。我正在使用firebug查看DOM

任何帮助都会很好

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

$（函数（）{
$（“.digi_image:gt（-1）：lt（4）”）.wrapAll（“”.css（“border”，“2px实心红色”）；
$（“.digi_image:gt（3）：lt（8）”）.wrapAll（“”.css（“border”，“2px纯蓝色”）；
$（“.digi_image:gt（7）：lt（12）”）.wrapAll（“”.css（“border”，“2px纯绿色”）；
$（“.digi_image:gt（11）：lt（16）”）.wrapAll（“”.css（“border”，“2px实心橙色”）；
$（“.digi_pane”）。追加（“”）；
}); 

HTML（缩写），但基本上重复了16次

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

---

我认为您的问题在于使用gt（）和lt（）选择器。您应该改为查找slice（）

查看此帖子：

---

对于那些好奇的人。。。这就是我所做的

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

$（“.digi_image”）.slice（0,4）.wrapAll（“”.css（“border”，“2px实心红色”）；
$（“.digi_image”）.slice（4,8）.wrapAll（“”.css（“border”，“2px纯蓝色”）；
$（“.digi_image”）.slice（8,12）.wrapAll（“”.css（“border”，“2px纯绿色”）；
$（“.digi_image”）.slice（12,16）.wrapAll（“”.css（“border”，“2px实心橙色”）；
$（“.digi_pane”）。追加（“”）；

这正是我所需要的。也许可以提高一点效率，但它是有效的