Question

我正在尝试将4个图像容器放入一个新窗格，共有16个图像。下面的jQuery是我想出来的。第一个窗格正确显示，其中包含4个图像。但第二个有4个图像，加上第3个窗格。第三个窗格有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>

Answer 1

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

看看这篇文章： http://docs.jquery.com/Traversing/slice

Answer 2

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

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

它正是我需要的方式。可能会提高效率，但它确实有效。

jQuery索引选择器

2 个答案: