获取 UL 内元素的索引答案

【问题标题】：Get Index Of Element Within UL获取 UL 内元素的索引
【发布时间】：2009-06-09 01:08:09
【问题描述】：

使用 jQuery，我希望能够获取包含锚标记的 HREF 等于“#All”的 li 的索引。（在这种情况下，正确的结果是 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>

我试过了：

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

...没有运气。我做错了什么？

【问题讨论】：

标签： jquery

【解决方案1】：

应该这样做：

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

您选择了所有 <ul>，而不是您想要从中获取索引的所有 <li>。
您必须使用:has 选择器检查<li> 元素:has 是否与您想要的链接，否则匹配的元素将是<a> 本身而不是<li>。

Tested the above 它给了我正确的答案，3，因为索引是从 0 开始的。

【讨论】：

如果要查找具有指定文本的a元素的索引怎么办？

【解决方案2】：

我认为这是因为您的第一条规则是匹配所有 UL 元素，而您希望它匹配所有 LI 元素。试试：

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

【讨论】：

【解决方案3】：

您希望在另一个上下文中获取元素的索引，作为一组元素的一部分。有关更多信息，尤其是示例，请参阅 API 文档中的index()。

<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>

【讨论】：