Javascript获取所有锚链接的索引

Javascript to get index of all anchor links

本文关键字：链接 索引 获取 Javascript      更新时间：2023-09-26

Jquery 1.4 版本支持 .index(( 函数，但我们较旧的环境仅支持 1.3，因此在今年晚些时候升级之前我无法使用 .index((。

因此，这是我使用传统 javascript 与 .length 和 jquery 单击函数混合使用的方法，以便在单击时获取每个锚点的索引，但我的演示 1 方法在单击时返回页面上的总锚点。

我需要您的帮助才能使用 onclick(可能没有参数(使这个函数非常简单，因为我需要在多个函数中使用它。

$("a").click(function() {
      var links = document.links;
      for (var i = 0; i < links.length; i++) {
        var link = document.getElementsByTagName("a").length
        alert(link)
        return false;
      }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<a href="http://www.google.com">Google Link</a>
<a href="http://www.google.com">Google Link</a>
<ul>
  <li><a href="http://www.google.com">Google Link</a>
  </li>
  <li><a href="http://www.google.com">Google Link</a>
  </li>
</ul>

例如，如果我至少有 1.4 个 jQuery，我会使用这种方法，本演示的结果是我正在寻找的预期行为：

$("a").click(function () {
    var count = $(this).index('a');
    alert('link' + count);
    return false;
});

演示 2：http://jsfiddle.net/43tmut7t/16/

你已经完成了一半 - 只需将links列表中的每个链接与this进行比较：

$("a").click(function() {
  var links = document.links;
  for (var i = 0; i < links.length; i++) {
    if (links[i] == this) {
      alert('link ' + i);
      return false;
    }
  }
});
<a href="">0</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>

更有效的方法是在页面加载时添加 data- 属性(例如 data-linkIndex(，然后在单击链接时读取该属性。它循环访问链接一次，而不是每次单击链接时，并直接从元素读取值，例如

$(function() {
  for (var links=document.links, i=0, iLen=links.length; i<iLen; i++) {
    links[i].setAttribute('data-linkIndex', i);
    links[i].addEventListener('click', function(){console.log(this.getAttribute('data-linkIndex'))});
  }
})
相关文章：