Question

我正在尝试使用容器内所有链接之间的箭头键来编写某些东西，但由于某种原因，我无法获得#abc中href元素的索引，但我可以在xyz中使用相同的一般代码。

对于abc中的任何点击，它都显示为0，为什么？

<div id="woot">
   <div id="xyz">
      <a href="#">x</a>
      <a href="#">y</a>
      <a href="#">z</a>
   </div>
   <div id="abc">
      <ul>
         <li><a href="#">a</a></li>
         <li><a href="#">b</a></li>      
         <li><a href="#">c</a></li>  
      </ul>
   </div>
</div>

$(document).ready(function() {
   $('#woot a').on('click', function() {
      var current = $("#woot a:focus").index();
      var length = $('#woot a').length;
      console.log("current index is: " + current + " total of: " + length);
   });
});

https://jsfiddle.net/s313buox/2/

Answer 1

您可以根据包含所有后代a元素的jQuery对象获取所单击的a元素的索引。例如，在事件侦听器内部，您可以将this作为参数传递给.index()方法

$('#letters a').index(this);

这样做，索引将相对于jQuery对象$('#letters a')而不是兄弟元素（如示例中所示）。

Updated Example

$('#letters a').on('click', function(e) {
  var current = $('#letters a').index(this);
  var length = $('#letters a').length;
  console.log("current index is: " + current + " total of: " + length);
});

由于你在三个不同的地方使用$('#letters a')，你也可以在变量中存储对jQuery对象的引用，这样就不必多次查询它了：

var $anchors = $('#letters a');
$anchors.on('click', function(e) {
  var current = $anchors.index(this);
  var length = $anchors.length;
  console.log("current index is: " + current + " total of: " + length);
});

作为旁注，索引是从零开始的，而jQuery对象的长度则不是。这意味着单击最后一个元素将记录：

当前指数为：5总计：6

您可能希望通过在索引中添加一个或从长度中减去一个来考虑这一点。

Answer 2

   $(document).ready(function() {
 $('#woot a').on('click', function() {
var intCurrentIndex = $(this).index();
     var intLength = $('#woot a').length; console.log("current index is: " + intCurrentIndex + " total of: " + intLength); 
}); 
})

Answer 3

对于abc中的任何点击，它都显示为0，为什么？

<强>原因：

在div#abc下的ul li下，每个a只有一个子a元素。所以它会为每个锚元素返回0。

注意：div#abc中的 div#xyz元素不是var current = $("#woot a").index($("a:focus"));//It will return the index based on this $("#woot a") collection(array) elements. //var current = $("#woot a").index($(this));中的直接子元素。

更新：（征求意见）

您应该以这种方式使用index()，

var current = $("#woot a:focus").index(); //It will return the index considering its immediate parent.

而不是这个

DEMO

无法获得href元素的索引

3 个答案: