jQuery get index position of an element by class from an array

Question

I've got multiple music players on a page and need to make an index of them to pull the position of the current player from. The issue is that the currentPlayer is not a child, so using .find or .filter and then .index will always return a value of 0 because nothing else is in the array.

So I need to find .currentPlayer's index within the player array.

HTML (very simplified):

<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();

Answer 1

current.index() will search its parent for the element. so since current is an only child, it's zero.

You can pass a selector to .index; it'll tell jQuery to search inside that for your element.

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

Or, you can tell jQuery to search for a specific element inside of an array:

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

Answer 2

You're probably looking for

$('div.player').index($('.currentPlayer'))

http://jsfiddle.net/hmartiro/3Wzbd/