jQuery:如何获取选择数组中元素的索引?

时间:2015-03-09 21:58:22

标签: javascript jquery frontend

我有这样的HTML结构:

<div class="container">
  <div class="item">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
  <div class="item">
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
  </div>
</div>

我用jQuery选择所有A-s,在这里总共得到6个对象。我想得到6的数组中的A的索引(例如,我可以检测到哪个A被点击),但是当我使用.index()时,我得到元素相对于其父元素的索引。因此,对于第5个A,我得到与第2个索引相同的索引,因为第5个实际上是其div.item中其组中的第二个:

$('a').click(function(){
    console.log ( $(this).index() ); // returns "1" for the 5th A
});

那么有没有办法在选择的数组中获取被点击元素的索引,而不是在DOM中的父元素内?

3 个答案:

答案 0 :(得分:5)

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

var $a = $('.container > .item > a').click(function() {
    console.log ( $a.index(this) ); 
});

答案 1 :(得分:2)

$('a').click(function(){
  $("#result").text($('a').toArray().indexOf(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
  <div class="item">
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
  </div>
</div>
<div id="result"></div>

答案 2 :(得分:2)

查看.index()的jquery文档。您可以按如下方式修改代码以获得所需的结果:

$('.container').on("click", "a", function(){
    console.log ( $("a").index($(this))); 
});