jQuery从数组中按类获取元素的索引位置答案

【问题标题】：jQuery get index position of an element by class from an arrayjQuery从数组中按类获取元素的索引位置
【发布时间】：2012-09-06 22:49:34
【问题描述】：

我在一个页面上有多个音乐播放器，需要对它们进行索引以从中提取当前播放器的位置。问题是 currentPlayer 不是一个孩子，所以使用 .find 或 .filter 然后 .index 将始终返回 0 的值，因为数组中没有其他内容。

所以我需要在player 数组中找到.currentPlayer 的索引。

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

【问题讨论】：

标签： jquery arrays class filter

【解决方案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);

【讨论】：

第二种方法的荣誉——缓存的选择器是给获胜者的
是的，你已经保存了这些选择器，为什么不使用 'em :-)

【解决方案2】：

你可能正在寻找

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

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

【讨论】：

【解决方案3】：

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

【讨论】：