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)
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>
This should do it:
var index = $("#tabs ul li").index($("li:has(a[href='#All'])"));
<ul>
instead of all <li>
s you wanted to get the index out of.<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.
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']"))