jQuery index selectors

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>"); 

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