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('.red')这样的index()方法中，但我无法让任何东西工作。

Answer 1

嗯，documentation说:

.index( element )
element The DOM element or first element within the jQuery object to look for.

所以可以这样做:

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

如果您还没有 selectedElements，您可以选择相应的同级元素，例如:

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

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

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