如何使用jQuery打印容器内元素的nth-child序号

原代码里的$(this).nth-child()是错误写法，jQuery并没有这个方法。要获取元素在容器内的nth-child序号（从1开始计数），可以用以下方法：

实现思路 #

利用jQuery的index()方法获取元素在同级兄弟节点中的索引（索引从0开始），再加1就得到nth-child的序号。

完整代码示例 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <p>first</p>
  <p>second</p>
  <p>third</p>
</div>

CSS

p {
  cursor: pointer;
}

JavaScript

$('.wrapper p').on('click', function() {
  // 获取并打印nth-child序号
  const childIndex = $(this).index() + 1;
  console.log(childIndex);
})

效果说明 #

点击内容为second的<p>标签时，控制台会打印2，符合nth-child的计数规则。

内容的提问来源于stack exchange，提问作者seriously