javascript - jQuery:获取具有相同类的对象列表中DOM中的对象编号

Question

假设我有页面上的 $('.mybutton').length==6 这意味着页面上有六个具有类 .mybutton 的对象。

$('.mybutton').on('click',function(){
//one of 6 buttons was clicked
});

如果我输入 $('.mybutton') ，将按某种顺序显示六个对象。

问题是:如何获取对象的编号？

假设有 6 个对象，并且单击了该列表中的第二个对象，我需要对第 5 个对象进行一些操作。

Answer 1

index() 有效吗？

$('.mybutton').on('click',function(){
    console.info("button", $(this).index(), "was clicked");
});

如果元素是兄弟元素，它应该可以工作，如 docs 中所述。 , 如果我们省略参数，.index() 将返回匹配元素集中第一个元素相对于其兄弟元素的位置。检查下面的示例:

$(".button").on("click", function() {
  $("#results").html("You've clicked on the element with the index " + $(this).index());
});

.button {
  padding: 5px;
  border: 1px solid grey;
  margin: 5px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <div class="button">Example 0</div>
  <div class="button">Example 1</div>
  <div class="button">Example 2</div>
  <div class="button">Example 3</div>
  <div class="button">Example 4</div>
</div>
<div><b>Results:</b>
</div>
<div id="results"></div>

如果由于某种奇怪的原因不起作用，一个快速的解决方案是......

(请注意，根据标准/性能，这可能不是最佳解决方案)

$('.mybutton').each(function(i) {
    $(this).on('click',function(){
        console.info("button", i, "was clicked");
    });
});

但是如果索引确实不起作用，您应该向您要修改的按钮添加类、id、数据参数 - 任何允许我们区分项目的内容。

例如，假设您将一个类 special-modifier 添加到第 5 个按钮，您将执行以下操作:

$('.mybutton').on('click',function(){
    if($(this).is(".special-modifier")) {
        console.info("special modifier button was clicked");
    }
});