Question

在click事件中，我想获取所选元素的索引。但是我不只是想得到N索引，其中N表示它是父元素的第N个子元素。

相反，我想要N索引，其中N表示它是包含指定类的父元素的第N个子节点。在此示例中，指定的索引是“type-2”，因此最后一个子节点应该具有N = 2，因为它是具有该类的父元素的第3个子节点。

<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>

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

$(‘.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>

使用jQuery获取子的N索引，具有特定的类

2 个答案: