Селекторы индекса 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>");

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