确定子元素相对于其父元素的索引的最简单方法

Easiest way to determine the index of a child element relative to its parent?

本文关键字：元素 索引 最简单 方法 相对于      更新时间：2023-09-26

我有一些HTML标记，类似于:

<div id="parentElement">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

我用jQuery给每个子元素附加一个事件处理程序:

$( "div.child" ).on( "click", someFunction );

是否有一个简单的方法让我找出哪个子元素被触发/点击从事件对象?例如，我希望能够确定用户是否点击了第三个子<div>，而不是另一个子<div>。

使用 index() 方法获取基于其兄弟姐妹的索引，并且在处理程序内部this指的是被单击元素的dom对象。

$("div.child").on("click", function() {
  console.log($(this).index())
});


$("div.child").on("click", function() {
  console.log('Clicked div' + ($(this).index() + 1))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parentElement">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

可以使用事件对象的 currentttarget 属性，或者使用jQuery的 index()函数。

$( "div.child" ).on( "click", function(event){
   console.log(event.currentTarget);
} );


$("div.child").on("click", function(e) {
  console.log(e.currentTarget);
  console.log($(this).index());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parentElement">
  <div class="child">First</div>
  <div class="child">Second</div>
  <div class="child">Third</div>
  <div class="child">Fourth</div>
</div>

在被点击的元素上使用jQuery的.index()函数

$( "div.child" ).on( "click", function(e){
  alert($(this).index());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parentElement">
    <div class="child">Test1</div>
    <div class="child">Test2</div>
    <div class="child">Test3</div>
    <div class="child">Test4</div>
</div>

您可以使用jquery index查找子

的索引
$( "div.child" ).on( "click", function(event){
console.log($(this).index())
} );

JSFIDDLE

相关文章：