CODEWITHSUNDEEP
javascriptjquery
IAmYourFaja
IAmYourFaja

Reputation: 56914

jQuery: How to obtain the index of a list element

Given the following HTML:

<ul>
    <li class="imgThumbLi">
        <img src="larry.jpg"/>
    </li>
    <li class="imgThumbLi">
        <img src="curly.jpg"/>
    </li>
    <li class="imgThumbLi">
        <img src="moe.jpg"/>
    </li>
</ul>

Then I have some jQuery to handle whenever someone hovers their mouse over one of these <img> elements:

$(".imgThumbLi").live({
    mouseenter:
        function() {
            // Obtain the source of the current image we're hovering over.
            var src = $(this).children('img')[0].src;

            // Now I need to know which <li> the "current" (one we're hovering
            // over) image's parent <li> we're in, as a zero-based  index
            // of the <ul>.
            var currListElementIndex = ????
        }
    }
);

So, if the user was hovering over larry.jpg, then the value of currListElementIndex would be 0. If they were hovering over moe.jpg, then the value would be 2, etc. Thanks in advance!

Edit: Because of some other constraints, I can't add IDs to the <li> elements or do anything else that is that obvious...I need to obtain the <ul> somehow (maybe via a parent function??) and figure out which index of that <ul> I'm in.

Upvotes: 1

Views: 75

Answers (2)

Shyju
Shyju

Reputation: 218732

$(".imgThumbLi").live({
    mouseenter:
        function() {          
            var item=$(this);
            var src = $(this).children('img')[0].src;
            var currListElementIndex = item.index();
            alert(currListElementIndex);
        }
    }
);

Upvotes: 0

Sethunath K M
Sethunath K M

Reputation: 4761

Since the live function is applied on the "li" , you can get its index using $(this).index() .So

var currListElementIndex = $(this).index() returns the index

Upvotes: 3

Related Questions