title: jQuery get index position of an element by class from an array
body: <p>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 <code>currentPlayer</code> is not a child, so using <code>.find</code> or <code>.filter</code> and then <code>.index</code> will always return a value of <code>0</code> because nothing else is in the array.</p>
  
  <p>So I need to find <code>.currentPlayer</code>'s index within the <code>player</code> array.</p>
  
  <p>HTML (very simplified):</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;article&gt;
               &lt;div class="player"&gt;&lt;/div&gt;
          &lt;/article&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;article&gt;
               &lt;div class="player currentPlayer"&gt;&lt;/div&gt;
          &lt;/article&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;article&gt;
               &lt;div class="player"&gt;&lt;/div&gt;
          &lt;/article&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var player  = $('.player'),
      current = player.filter('.currentPlayer'),
      index = current.index();
  </code></pre>