当前第n个:父项的子项

Current nth:child of the parent

本文关键字:      更新时间:2023-09-26

有没有办法找出我点击div时div nth:child

$('#divStatus div').on('click', function() {
  console.log($(this).parents().eq())
})
#divStatus div {
  display: inline-block;
  background: red;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divStatus">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

是的,使用 jQuery 的 index 函数。 index 是基于 0 的,而:nth-child是基于 1 的,所以你必须允许这一点。

$('#divStatus div').on('click', function() {
  console.log($(this).index() + 1);
})
#divStatus div {
  display: inline-block;
  background: red;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divStatus">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

使用.index()函数获取当前点击的div的索引:

索引

将从零开始,因此您需要向其添加 +1 以获得其正确的索引。

$(document).ready(function() {
  $('#divStatus div').click(function() {
      var index = $(this).index() + 1;
      console.log(index);
  });
});
#divStatus div {
  display: inline-block;
  background: red;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="divStatus">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

为此

使用index()函数。

看这里 JSFIDDLE

.HTML:

<div id="divStatus">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.CSS:

#divStatus div {
  display: inline-block;
  background: red;
  width: 100px;
  height: 100px;
}

JS代码:

 $('#divStatus div').on('click', function() {
 var nth = $(this).index() + 1;
 console.log(nth)
})

index()0开始,在您的情况下,您需要它从1nth-child(1))开始,这就是为什么您将1添加到index()

在此处阅读有关 index() 的更多信息

相关文章:
  • 没有找到相关文章