jquery - 无法获取 href 元素的索引

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 对象的长度不是。这意味着单击最后一个元素将记录:

current index is: 5 total of: 6

您可能需要通过向索引加一或从长度中减一来考虑这一点。