Получение индекса текущего элемента по всем соответствующим элементам в DOM

Question

У меня есть структура DOM, которая выглядит следующим образом:

<div class="chapter">
   <section></section>
   <section></section>
</div>
<div class="chapter">
   <section></section>
   <section></section>
   <section class="current"></section>
   <section></section>
</div>
<div class="chapter">
   <section></section>
   <section></section>
   <section></section>
   <section></section>
</div>

Я хочу получить порядковый номер раздела с классом «current» для всех разделов. В этом примере индекс этого будет 5, поскольку это тег 5-го раздела и содержит класс current.

Как мне получить это с помощью jQuery?

Я начал с этого, чтобы получить список всех разделов в DOM:

var sections = $('section');

Я пробовал такие вещи, чтобы попытаться получить желаемый результат:

alert($(sections+'.current').index());

Возвращает ошибку js.

Что мне здесь не хватает? Спасибо!

Answer 1

В вашем коде $('section') вернет вам все разделы в виде объекта jquery.Среди них, чтобы получить индекс раздела, который имеет класс current, вы можете сделать это:

sections.index($(".current"));

Это вернет вам относительный индекс раздела с классом current, который будет равен 4 как$('sections') вернет вам массив объектов jQuery (с индексом 0), который содержит все элементы section.Таким образом, элемент, который соответствует 5-му элементу, и индекс вернет 4. Надеюсь, это поможет fiddle .

Answer 2

$('.current').index('section');

См. Документы по index.

Если в качестве аргумента передается строка селектора, .index () возвращает целое число, указывающее позицию исходного элемента относительно элементов, соответствующих селектору. Если элемент не найден, .index () вернет -1.

Answer 3

изменить, как это

var sections = 'section';

ваш код делает это и его неправильно

alert($($('section')+'.current').index());