Селекторы индексов jQuery

Question

Я пытаюсь поместить 4 из моих контейнеров с изображениями в новую панель, содержащую в общей сложности 16 изображений.Приведенный ниже jQuery - это то, что я придумал для этого.Первая панель отображается корректно с 4 изображениями в ней.Но во втором есть 4 изображения, плюс 3-я панель.И на 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>");

И это работает именно так, как мне нужно.Вероятно, можно было бы сделать немного эффективнее, но это работает.