获取多个< >标签

Get index of multiple <a> tags

本文关键字：标签 获取      更新时间：2023-09-26

我需要每个<a>的索引。这是我目前所拥有的，但我不知道如何将其传递给我的函数

<a href="#" id="myAnchor">Link</a><br>
<a href="#" id="myAnchor1">Link</a><br>
<a href="#" id="myAnchor2">Link</a><br>
<a href="#" id="myAnchor3">Link</a><br>
<a href="#" id="myAnchor4">Link</a><br>
JavaScript

window.onload = function () {
    var test = this.test = document.getElementsByTagName('a');
    for (var counter = 0; counter < test.length; counter++) {
        index = Array.prototype.indexOf.call(test, test[counter]);
        test[counter].onclick = runTheExample;
        console.log(index);
    }
}
function runTheExample() {
    alert();
}

我需要一个警告，当一个元素被点击。我认为这在控制台输出是DOM索引号。如果我说错了请指正

我会尝试下面这样的生活。

window.onload = function() {
   var test = this.test = document.getElementsByTagName('a');
   for (var counter = 0; counter < test.length; counter++){
      (function (index) {
          test[index].onclick = function () {
              runTheExample(index);
          }
      }(counter));
   }
}
function runTheExample(index){
   alert(index);
}

您可以将索引保存在html属性中，然后在alert方法中使用它。用下面的代码片段更新js文件-

window.onload = function() {
   var test = this.test = document.getElementsByTagName('a');
   for (var counter = 0; counter < test.length; counter++){
      index = Array.prototype.indexOf.call(test,test[counter]);
      test[counter].setAttribute('index',index) // add index attribute to DOM
      test[counter].onclick = runTheExample ;
      console.log(index);
   }
}
function runTheExample(index){
   alert(this.getAttribute('index')); // Use index attribute here
}

这是一种方法。您所要做的就是将Array.prototype.indexOf用于e.target.parentNode中a元素的列表，并搜索e.target的值。

e.target =你的a元素

e.target.parentNode = a父元素。

window.addEventListener('DOMContentLoaded', function() {
  Array.prototype.forEach.call(document.querySelectorAll('a'), function(link) {
    link.addEventListener('click', function(e) {
      var index = Array.prototype.indexOf.call(e.target.parentNode.querySelectorAll('a'), e.target);
      alert(index);
    });
  });
});
<a href="#" id="myAnchor">Link</a>
<br>
<a href="#" id="myAnchor1">Link</a>
<br>
<a href="#" id="myAnchor2">Link</a>
<br>
<a href="#" id="myAnchor3">Link</a>
<br>
<a href="#" id="myAnchor4">Link</a>
<br>

如果你依赖于你的id属性，那么你所要做的就是得到字符串末尾的所有数字:

window.addEventListener('DOMContentLoaded', function() {
  Array.prototype.forEach.call(document.querySelectorAll('a'), function(link) {
    link.addEventListener('click', function(e) {
      var index = e.target.id.match(/'d*$/);
      alert(index);
    });
  });
});
<a href="#" id="myAnchor">Link</a>
<br>
<a href="#" id="myAnchor1">Link</a>
<br>
<a href="#" id="myAnchor2">Link</a>
<br>
<a href="#" id="myAnchor3">Link</a>
<br>
<a href="#" id="myAnchor4">Link</a>
<br>

您可以将nodeList转换为数组，并在forEach中添加单击eventListener以获得已单击锚的索引。

var anchors = document.getElementsByTagName('a'),
    output = document.querySelector('p'),
    anchorsArray = Array.prototype.slice.call(anchors);
anchorsArray.forEach(function(elem, index) {
  elem.addEventListener('click', function(e) {
    e.preventDefault();
    output.innerHTML = "You have clicked the anchor with the index of " + index;
  }, false);   
});
<a href="#" id="myAnchor">Link</a><br>
<a href="#" id="myAnchor1">Link</a><br>
<a href="#" id="myAnchor2">Link</a><br>
<a href="#" id="myAnchor3">Link</a><br>
<a href="#" id="myAnchor4">Link</a><br>
<p class="output"></p>

选择所有<a>:

var links = document.querySelectorAll("a");

浏览每个链接:

[].forEach.call(links, function(link, index) { });

为每个链接添加一个点击事件:

link.addEventListener("click", function() {});

这里你想提醒索引:

link.addEventListener("click", function() {
    alert(index);
});
JavaScript完成

: 

var links = document.querySelectorAll("a");
[].forEach.call(links, function(el, index) {
    el.addEventListener("click", function() {
        alert(index);
    });
});
示例

相关文章：