Question

警报应在文档中显示锚点的从零开始的索引，而不是在链接后面。 HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
  </head>
  <body>
    In my life, I used the following web search engines:<br/>
    <a href="//www.yahoo.com">Yahoo!</a><br/>
    <a href="//www.altavista.com">AltaVista</a><br/>
    <a href="//www.google.com">Google</a><br/>
    <script type="text/javascript" src="js/js8.js"></script>
  </body>
</html>

JavaScript的：

function registerHandlers() {
  var as = document.getElementsByTagName('a');
  for (i = as.length; i-- >= 0;) {
    as[i].onclick = function() {
      alert(i);
      return false;
    }
  }
}

我尝试使用jQuery：

$('a').click(function(event) {
    var as = document.getElementsByTagName('a');
    alert($(this).index());
});

但我得到的指数如1,3,5而不是0,1,2

Answer 1

我的解决方案是向data-index添加<a>属性。

function registerHandlers() {
  var as = document.getElementsByTagName('a');

  for (var i = 0; i < as.length; i++) {
    as[i].setAttribute('data-index', i);
    as[i].onclick = function () {
      alert(this.getAttribute('data-index'));
    }
  }
}

Answer 2

试试这个（http://jsfiddle.net/bcjv6suf/）：

alert($('a').index(this));

P.S。 https://api.jquery.com/index/#index-selector

更新：同样没有jquery（你需要使用闭包来传递参数）

function registerHandlers() {
  var as = document.getElementsByTagName('a');
  for (i = as.length; i-- >= 0;) {
      as[i].onclick = (function(index) {
          return function() {
              alert(index);
              return false;
          }}(i));
  }
}

http://jsfiddle.net/bcjv6suf/2/

Answer 3

取决于您正在尝试查找该元素的索引。

使用jQuery

页面中所有<a>内<a>的实例索引：

var $links = $('a').click(function(event) {    
    alert($links.index(this));
});

兄弟姐妹组内的索引

<div id="div">
    <a/> 
    <a/>
    <a/>
</div>


$('#div a').click(function(event) {    
        alert($(this)index());
});

页面中所有元素的元素索引

$('a').click(function(event) {    
     alert($('*')index(this));
});

Answer 4

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Test page</title>
  </head>
  <body>
    In my life, I used the following web search engines:<br />
    <a href="//www.yahoo.com">Yahoo!</a><br />
    <a href="//www.altavista.com">AltaVista</a><br />
    <a href="//www.google.com">Google</a><br />

    <script type="text/javascript">
      function registerHandlers() {
        var as = document.getElementsByTagName("a");
        for (var i = 0; i < as.length; i++) {
          as[i].onclick = (function() {
            var n = i;
            return function() {
              alert(n);
              return false;
            };
          })();
        }
      }

      registerHandlers();
    </script>
  </body>
</html>

Answer 5

function registerHandlers() {
            var as = document.getElementsByTagName('a');
            for (var i = 0; i < as.length; i++) {
                as[i].addEventListener('click', (function(i) {
                    return function(e) {
                        e.preventDefault();
                        alert(i);
                    }
                })(i));
            }
        }

        registerHandlers();

Answer 6

不需要jQuery或诸如setAttribute之类的奇异属性。这个问题是关于闭包的。另外，不要忘记防止默认行为，这是当前此实践问题的一部分。

function registerHandlers() {
  var as = document.getElementsByTagName('a');
  for (var i = 0; i < as.length; i++) {
    const index = i;  // the following anon function closes over this variable
    as[i].onclick = function(event) {
      event.preventDefault();   // prevent default behaviour
      alert(index);
      return false;
    }
  }
}

JavaScript获得点击链接

6 个答案: