我试图将我的4个图像容器放到一个新窗格中，总共有16张图像。下面的jQuery是我想到的。第一个窗格正确显示出来，其中包含4张图像。但是第二个有4个图像，还有第三个窗格。第三窗格包含4张图像，再加上第四窗格。我不知道为什么会发生嵌套。我的换行不能导致它们的索引更改。我向它们添加了CSS边框，它似乎已正确索引。我应该怎么做？我想要的是在一个窗格中有1-4个，在另一个窗格中有5-8个，在9-12和13-16中。它必须是动态的，以便我可以更改每个窗格中的数字，因此不能在HTML中执行此操作。

可以在此处查看该问题的演示：http://beta.whipplehill.com/mygal/rotate.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>");
});

HTML(缩写)，但实际上重复了16次。

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

解决方案

我认为问题是我们使用了gt()和lt()选择器。我们应该改为查找slice()。

看看这篇文章：
http://docs.jquery.com/Traversing/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>");

它正是我需要的。可能可以提高效率，但它可以工作。