jQuery index selectors

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> ```