Получить индекс элемента внутри UL

Используя jQuery, я хотел бы получить индекс li, где содержащийся анкерный тег HREF равен "#All". (В этом случае правильным результатом будет 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']"))

... без везения. Что я делаю неправильно?

Ответ 1

Это должно сделать это:

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

Вы выбрали все <ul> вместо всех <li>, из которых вы хотите получить индекс.
Вы должны проверить, есть ли элемент <li>: есть ссылка с тем, что вы хотите, с помощью селектора :has, иначе совпадающий элемент будет <<25 > , а не <li>.

Протестировано выше, и он дает мне правильный ответ, 3, поскольку индекс основан на 0.

Ответ 2

Я думаю, потому что ваше первое правило соответствует всем элементам UL, когда вы хотите, чтобы они соответствовали всем элементам LI. Попробуйте:

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

Ответ 3

Вы хотите получить индекс элемента внутри другого контекста, как часть набора элементов. Подробнее см. index() в документации по API, в частности примеры.

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