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

友情链接