Селекторы индекса jQuery
Я пытаюсь разместить 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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я думаю, ваша проблема в том, что вы используете селекторы gt () и lt (). Вместо этого вам следует искать slice ().
Посмотрите этот пост: http://docs.jquery.com/Traversing/slice
Для любопытных ... вот что я сделал.
$(".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>");
И работает именно так, как мне нужно. Возможно, можно было бы сделать более эффективным, но это работает.