jquery - 为数组中的每个 jquery 对象绑定事件时，有什么方法可以找到 jquery 对象索引？

Question

$("input").on("click", function(){
  //how do i find the the input index here?
});

我没有做以下事情，而是试图找到一种更聪明的方法。有什么好主意吗？

$("input").eq(0).on("click", function(){
  //do something for eq(0)  
});

$("input").eq(1).on("click", function(){
  //do something for eq(1)  
});

Answer 1

您需要使用该index功能。有两种调用方式。

如果所有元素都是兄弟

如果所有元素都是同一个父元素的兄弟元素，并且该父元素中没有其他元素，则可以使用$(this).index().

当index不带任何参数调用时，它会获取元素在其兄弟元素中的位置。所以父母的第一个孩子将是0，第二个1，等等。

如果元素不是所有的兄弟姐妹

如果文档结构更复杂，那么您将不得不在特定集合中进行搜索。这意味着选择要在其中搜索的所有元素，然后将要搜索的元素作为第一个参数传递。这就像您indexOf在数组上进行搜索一样。

var inputs = $("input").on("click", function(){
    console.log(inputs.index(this));
});

Answer 2

您可以将单击的元素传递给 jQuery 的index方法：

var $input = $("input");
$input.on("click", function() {
   var i = $input.index(this);
});

Answer 3

您可以使用this

$("input").on("click", function(){
    var index = $(this).index();
});

这将找到与其同级输入相关的单击输入的索引。例子：

<div>
    <input type='text'/> //index 0
    <input type='text'/> //index 1
</div>
<div>
    <input type='text'/> //index 0
</div>

Answer 4

<ul id="list">
    <li><a href="#sdf">abc</a> 
    </li>
    <li><a href="#wer">def</a> 
    </li>
    <li><a href="#xcv">ghi</a> 
    </li>
    <li><a href="#poi">jkl</a> 
    </li>
</ul>
<div id="count"></div>

这将使用更新的 .on() 方法返回每个 a 元素的索引

$("#list li a").on('click', function () {
    var index = $("#list li a").index(this) + 1;
    $("#count").html(index);
});

Answer 5

如果您想访问选择器当前迭代中的 DOM 元素，您将使用$(this). 如果您想找到与匹配元素相关的 DOM 元素的实际索引，这将是一个整数，那么您将使用.index().

我创建了一个jsfiddle来演示这一点。

$('.indexme').bind('click',function(){

    //$(this) is a jquery object of the currently matched DOM element
    //.index() will return the integer value of the actual index

    $(this).append($(this).index());

});