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