Как получить с JQuery номер текущего элемента?

Question

[Андрей]

На странице есть много элементов вида:
<div class="step well"></div>

Внутри этих div элементов находится следующее:
<h3>Шаг 1 из 14</h3>

Вместо "14" подставляется общее количество элементов div, а вместо "1" (Шаг 1) необходимо подставлять порядковый номер текущего элемента.

Отмечу, что смена этих div элементов происходит с помощью слайдера, то есть одновременно на экране юзеру будет показываться только один такой элемент.

Нашёл в интернете метод index, попробовал сделать так:
$('h3').append($('div.step').index());

Но постоянно цифра показывается одна и та же, то есть словно это всегда самый первый элемент.

Нашёл ещё такое решение:

$('div.step').click(function() {
            $('h3').append( $(this).index()+1 );
        });

Но по очевидным причинам это не подходит, так как номер должен отображаться не при клике, а всегда и у каждого элемента должен быть свой номер. Но я так и не понял, как это сделать правильно, прошу помощи у вас. Спасибо.

Answer 1

[westy]

Вы получаете список объектов $('div.step'). Потом к списку применяете метод $('div.step').index(). Так вот он возвращает номер только первого объекта из списка. Вам надо полученный список обойти в цикле, чтоб узнать позицию каждого.
Примерно так

var stepList = $('div.step');// Ищем все элементы, получаем список элементов
stepList.each(function() {// Проходим по каждому элементу циклом
    var self = $(this);// Получаем текущий элемент в цикле
    var index = self.index();// Узнаем его порядковый номер относительно списка элементов stepList
    self.find('h3').append(index);// В H3 вставляем номер
});

Comments

[Андрей]

Вот это я понимаю ответ, грамотный, обоснованный, главное, что работает сразу, как надо. Отдельное спасибо за комментарии к коду :)

Answer 2

[Андрей]

Вам надо брать index не просто от .step, а от того, который виден сейчас. Вот пример.