javascript - 从选定元素中获取索引

Question

所以我有一个带有一些子元素的 div，当我用 jQuery 选择一个时，我想在选择器中获取它的索引

<div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="red"></div>
  <div class="blue"></div>
  <div class="red"></div>
  <div class="blue"></div>
  <div class="blue"></div>
  <div class="red"></div>
</div>

所以可以说我选择了主 div 中的最后一个元素。如果我在它上面调用 index()，它会给我“7”，因为在所有子元素中，索引是“7”。但是现在假设我想根据其他“红色”元素获取索引，目标是返回值“4”，因为在所有“红色”元素中，它是第五个。我查看了文档并没有找到很多内容，然后我尝试将选择器放入 index() 方法中，例如 index('.red') 但我无法得到任何工作。

Answer 1

好吧，文档说：

.index( element )
element要查找的 jQuery 对象中的 DOM 元素或第一个元素。

所以可以这样做：

selectedElements.filter('.red').index(this);

如果您还没有selectedElements，您可以选择相应的兄弟姐妹，例如：

$(this).parent().children('.red')

如果每个元素只有一个类，那么过滤器可以是动态的：

var index = $(this).parent().children('.' + this.className).index(this); 

Answer 2

使用此处.index()记录的功能

对于上述内容，如果想获取红色类元素的索引，请使用$('div .red').index(elem);

$('div .red)将在 div 中创建具有红色类的元素列表。将在数组内.index(elem)搜索。elem

Answer 3

使用 id=test 作为父级运行所有这些

演示：http: //jsfiddle.net/T7fXR/

$('#test > div').each(function(){
    var thisClass=$(this).attr('class');
    $(this).css('background',thisClass );
    /* get index based on class*/
    var idx=$('.'+thisClass).index(this);
    $(this).text('Index= '+idx)

})

Answer 4

对我来说，这适用于您给定的 HTML：

$('div').eq(5)​​​​​​​​​​.index('.red') // 3

您可以将选择器放入.index()函数中。