JQuery получить индексную позицию элемента по классу из массива

У меня есть несколько музыкальных плееров на странице, и вам нужно сделать их индекс, чтобы вытащить позицию текущего игрока. Проблема в том, что currentPlayer не является дочерним, поэтому с помощью .find или .filter, а затем .index всегда будет возвращать значение 0, потому что в массиве ничего больше не содержится.

Поэтому мне нужно найти индекс .currentPlayer в массиве player.

HTML (очень упрощенный):

<ul>
    <li>
        <article>
             <div class="player"></div>
        </article>
    </li>
    <li>
        <article>
             <div class="player currentPlayer"></div>
        </article>
    </li>
    <li>
        <article>
             <div class="player"></div>
        </article>
    </li>
</ul>

JavaScript:

var player  = $('.player'),
    current = player.filter('.currentPlayer'),
    index = current.index();

ОТВЕТЫ

Ответ 1

current.index() будет искать свой родительский элемент. так как current - единственный ребенок, он равен нулю.

Вы можете передать селектор в .index; он скажет jQuery для поиска внутри этого элемента.

var player  = $('.player'),
    current = player.filter('.currentPlayer'),
    index = current.index('.player');

Или вы можете указать jQuery для поиска определенного элемента внутри массива:

var player  = $('.player'),
    current = player.filter('.currentPlayer'),
    index = player.index(current);

Ответ 3

var position = 0;
$('.player').each(function(i){
if ($(this).hasClass('currentPlayer') == true) { position = i; }
});