使用带有特定类的jQuery获取子级的N个索引

Question

在单击事件上，我希望获得所选元素的索引。但是，我不想简单地获得N个索引，其中N表示它是父元素的第N个子元素。

相反，我想要N个索引，其中N表示包含指定类的父元素的N个子元素。在这个例子中，指定的索引是"type-2"，所以最后一个子元素应该有N=2，因为它是具有该类的父元素的第三个子元素。

<div class="parent-element">
   <div class="child type-1"></div>
   <div class="child type-1"></div>
   <div class="child type-2"></div>
   <div class="child type-2"></div> 
   <div class="child type-2"></div> <!-- index should equal 2 -->
</div>

它将以这种方式选择..。

$(‘.child’).click(function(){
    $(this). …
}

Answer 1

可以对集合调用.index()方法，它将返回集合中元素的索引。所以你可以使用：

var index = $(this).parent().children(".type-2").index(this);

Answer 2

使用@Barmar解决方案：

​

$(".child").on( 'click', function() {
  var lastClass = $(this).attr('class').split(' ').pop();
  var index = $(this).parent().children("." + lastClass).index(this);
  $("#index-clicked").html(index);
});

.child{
display: inline-block;
  width: 100px;
  height: 100px;
}

.type-1{
  background-color: gray;
}

.type-2{
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent-element">
   <div class="child type-1"></div>
   <div class="child type-1"></div>
   <div class="child type-2"></div>
   <div class="child type-2"></div> 
   <div class="child type-2"></div>
</div>

Index clicked : <span id="index-clicked"></span>

​