tags:

views:

924

answers:

3

Using jQuery, I'd like to be able to get the index of the li where the contained anchor tag's HREF equals "#All". (In this case the correct result would be 3)

<div id="tabs">
    <ul>
        <li><a href="#CPU"><span>CPU</span></a></li>
        <li><a href="#Pickup"><span>Pickup</span></a></li>
        <li><a href="#Breakfix"><span>Breakfix</span></a></li>
        <li><a href="#All"><span>All</span></a></li>
    </ul>
</div>

I have tried:

$("#tabs ul").index($("li a[href='#All']"))

...with no luck. What am I doing wrong?

+1  A: 

I think it's because your first rule is matching all UL elements, when you want it to match all LI elements. Try:

$("#tabs ul li").index($("li a[href='#All']"))
robertc
This does not work. It returns a "-1".
Jose Basilio
Yeah, didn't realise about the :has that Paolo pointed out
robertc
+9  A: 

This should do it:

var index = $("#tabs ul li").index($("li:has(a[href='#All'])"));
  • You were selecting all <ul> instead of all <li>s you wanted to get the index out of.
  • You have to check if the <li> element :has a link with what you want by using the :has selector, otherwise the matched element will be the <a> itself instead of the <li>.

Tested the above and it gives me the correct answer, 3, as the index is 0-based.

Paolo Bergantino
Beat me by a minute +1
Jose Basilio
+1  A: 

You want to get an element's index inside another context, as part of a set of elements. See index() in the API documentation for more information, particularly the examples.

<script type="text/javascript">
$(document).ready(function(){

    var which_index = $("#tabs ul li a").index($("a[href='#All']"));
    alert(which_index);
});
</script>

<body>
<div id="tabs">
    <ul>
        <li><a href="#CPU"><span>CPU</span></a></li>
        <li><a href="#Pickup"><span>Pickup</span></a></li>
        <li><a href="#Breakfix"><span>Breakfix</span></a></li>
        <li><a href="#All"><span>All</span></a></li>
    </ul>
</div>
</body>
artlung