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

嗯，documentation说：

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

所以可以这样做：

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

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

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

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

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

Answer 2

使用记录在案here

的.index()函数

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

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

Answer 3

使用id = test作为父

运行所有这些

DEMO：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()功能。

从所选元素中获取索引

4 个答案: