jQuery：获取对象列表中DOM中与class相同的对象编号

Question

假设我有 $('.mybutton').length==6 在页面上，这意味着我在页面上有六个对象 class .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、If we omit the argument, .index() will return the position of the first element within the set of matched elements in relation to its siblings 中所述，如果元素是兄弟元素，它应该可以工作。检查以下示例：

$(".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");
    });
});

但如果索引确实不起作用，您应该添加一个 class、id、数据参数 - 任何允许我们区分项目的东西 - 到您要修改的按钮.

例如，假设您将 class special-modifier 添加到第 5 个按钮，您将执行如下操作：

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

jQuery：获取对象列表中DOM中与class相同的对象编号

jQuery: get object number in the DOM among the list of objects with the same class

html

javascript

jquery

object