Question

我有一些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>之一。

Answer 1

您可以使用事件对象的 currentTarget 属性或使用 jQuery index() 功能

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用 index() 方法根据其兄弟信息获取索引，并在处理程序sudo chown -R YOUR-USER:YOUR-GROUP drupal-root-folder/内引用被点击元素的dom对象。

this

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

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

Answer 3

在点击的元素上使用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>

Answer 4

您可以使用jquery index查找子项索引

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

} );

JSFIDDLE

确定子元素相对于父元素的索引的最简单方法是什么？

4 个答案: