Geek Answers Handbook

JQuery index selectors

I am trying to place 4 of my image containers in a new window, having a total of 16 images. Below is an example of jQuery that I came across. The first panel comes out correctly with 4 images in it. But the second has 4 images, as well as the 3rd panel. And on the 3rd panel there are 4 images plus the 4th panel. I do not know exactly why nesting occurs. My packaging cannot change the index. I added css borders to them and it seems to be indexed correctly. How am I supposed to do this? I want to have 1-4 in one panel, 5-8 in another, 9-12 and 13-16. It needs to be dynamic so that I can change the number in each panel, so just doing it in HTML is not an option.

A demonstration of the problem can be seen here: http://beta.whipplehill.com/mygal/rotate.html . I am using firebug to view the DOM.

Any help would be great!

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

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>
+5
source share
2 answers

I think your problem is to use the gt () and lt () selectors. Instead, you should look for slice ().

Send a message: http://docs.jquery.com/Traversing/slice

+5
source

For the curious ... that's 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 exactly as I need it. It may be a little more efficient, but it works.

+1
source

More articles:


All Articles