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

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

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

Answer 2

您需要使用index功能。有两种方法可以调用它。

如果所有元素都是兄弟姐妹

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

在没有任何参数的情况下调用index时，它会获取元素在其兄弟之间的位置。因此，父母的第一个孩子将是0，第二个1等等。

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

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

var inputs = $("input").on("click", function(){
    console.log(inputs.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（）方法返回每个元素的索引

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

Answer 5

如果要访问选择器当前迭代中的DOM元素，您将使用$(this)。如果要查找与匹配元素相关的 DOM元素的实际索引，它将是整数，那么您将使用.index()。< / p>

我创建了一个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());

});

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

5 个答案:

如果所有元素都是兄弟姐妹

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