从选定元素中获取索引

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 )
元素要查找的DOM元素或jQuery对象中的第一个元素。

这样可以做：

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 .red)的红色类创建元素列表。 .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()函数。