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>

Per Hornshøj-Schierbeck · Accepted Answer · 2008-10-01 06:46:52Z

5

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

edited Oct 1, 2008 at 6:46

answered Sep 30, 2008 at 15:30

Per Hornshøj-Schierbeck

15.2k21 gold badges84 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wes P · Accepted Answer · 2008-09-30 15:41:08Z

1

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.

answered Sep 30, 2008 at 15:41

Wes P

9,87014 gold badges44 silver badges48 bronze badges

Collectives™ on Stack Overflow

jQuery index selectors

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related