JQuery - Как получить индекс элемента относительно его выбора (не его родитель)

Question

Если у меня есть такая структура:

<ul>
     <li>Foo</li>
     <li>Man</li>
     <li>Choo</li>
</ul>
<ul>
     <li>Tom</li>
     <li class="active">Dick</li>
     <li>Harry</li>
</ul>

И я делаю выбор так:

jQuery('li.active').index();

Результатом будет 1, когда то, что я хочу, будет 5 (или 4, если отсчет начинается с нуля).

Как мне это сделать? Я уверен, что это очень легко, и я просто рисую бланк.

Спасибо!

Answer 1

Если вы поместите эту структуру в контейнер div:

<div id="list">
    <ul>
         <li>Foo</li>
         <li>Man</li>
         <li>Choo</li>
    </ul>
    <ul>
         <li>Tom</li>
         <li class="active">Dick</li>
         <li>Harry</li>
    </ul>
</div>

Затем вы можете использовать этот jQuery:

$("#list li").index($("#list li.active"));   // gives you 4

Рабочая демонстрация здесь: http://jsfiddle.net/jfriend00/KRqZp/.

Это создает объект jQuery из всех тегов li.Затем он находит в этом списке тот индекс, который li.active, который, как я полагаю, вам нужен.

Существует несколько способов использования .index() в зависимости от того, как он используется.Этот конкретный метод возвращает, какой элемент в предыдущем селекторе соответствует параметру, который вы передали .index().

Answer 2

Индекс возвращает позицию выбранного элемента относительно его родных элементов ( см. Документы ).

Вам нужно попробовать что-то вроде этого:

var liIndex = -1;
$('li').each(function(i) {
    if ($(this).hasClass('active'))
        liIndex = i;
});