jQuery index selectors

Question

I'm trying to place 4 of my image containers into a new pane, having a total of 16 images. The jQuery below is what I came up with to do it. The first pane comes out correctly with 4 images in it. But the second has 4 images, plus the 3rd pane. And the 3rd pane has 4 images plus the 4th pane. I don't know exactly why the nesting is occurring. My wrapping can't be causing their index to change. I added css borders to them and it appears to be indexed correctly. How should I be going about this? What I want is to have 1-4 in one pane, 5-8 in another, 9-12, and 13-16. It needs to be dynamic so that I can change the number in each pane, so just doing it in the HTML isn't an option.

A demo of the issue can be seen here: http://beta.whipplehill.com/mygal/rotate.html. I'm using firebug to view the DOM.

Any help would be splentabulous!

The jQuery Code

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

The HTML (abbreviated), but essentially repeated 16 times.

<div class="digi_image">
    <div class="space_holder"><img src="images/n883470064_4126667_9320.jpg" width="100" /></div>
</div>

Answer 1

I think your problem is your use of the gt() and lt() selectors. You should look up slice() instead.

Check out this post: http://docs.jquery.com/Traversing/slice

Answer 2

For those who are curious... this is what I did.

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

And it works precisely how I need it to. Could probably be made a bit more efficient, but it works.