5

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

2 回答 2

5

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

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

于 2008-09-30T15:30:29.367 回答
1

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

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

它完全按照我的需要工作。可能会变得更有效率，但它确实有效。

于 2008-09-30T15:41:08.903 回答