Question

I am trying manipulate Jquery Infinite Carousel into dynamically resizing the image container based on the currently displayed image. I need to get the index of the Li element that contains the current image, but the problem is that Infinite Carousel removes and reorders the Li’s automatically, which means that their EQ() properties are constantly changing.

So, I need to assign them a REL attribute based on their index position when the page loads, before the slideshow begins and Infinite Carousel reorders the Li’s.

Basically, my Html is like this:

<li></li>
<li></li>
<li></li>

and I need to use jquery to make it into this on page load:

<li rel="1"></li>
<li rel="2"></li>
<li rel="3"></li>

I’ve researched a bunch on the jQuery API but I can’t figure out which property or combination of properties to use:

index(),
each(),
inArray(),
get()

Thanks for your help!

Answer 1

Try this:

$("ul").each(function() {
    $(this).children("li").each(function(i) {
        $(this).attr("rel", i+1);
    });
});