Question

我有一个带有几个动态生成按钮的页面。当我点击其中一个按钮时，我需要知道点击了哪个'nth-child'。

<div>
    <button class="btn"></button>
</div>
<div>
    <button class="btn"></button>
</div>
<div>
    <button class="btn"></button>
</div>
<div>
    <button class="btn"></button>
</div>

因此，如果我点击第3个按钮，我需要数字 3 才能成为结果。该号码将在申请中进一步使用。

Answer 1

将事件侦听器附加到元素，并使用.index() method检索单击按钮的父元素的索引：

$('.btn').on('click', function () {
  var index = $(this).parent().index();

  // ...
});

作为旁注，.index()方法从零开始，而:nth-child()伪类的索引从1开始（这意味着你需要采取如果你一起使用它们会考虑到这一点）

如果你想要父类div元素的索引基于包含按钮元素的兄弟：

$('.btn').on('click', function () {
  var index = $('.btn').parent().index($(this).parent());

  // ...
});

Answer 2

您可以区别对待每个人：

$('.btn').click(function () {
  console.log( $(this).attr('id') );
});

或获取项目索引：

$('.btn').click(function () {
  console.log($(this).index());
});

Answer 3

最好给每个按钮一个id，只是为了安全

$("button").click(function() {
     alert(this.id);
});

Answer 4

您可以将this传递给.index()方法（该方法会在调用的集合index()内返回其位置）

$('.btn').on('click', function() {
  var index = $('.btn').index(this);
});

jQuery - 点击了哪个按钮？

4 个答案: