Question

我网站上的标题有5个标签（它们是div标签，全部命名为＆＃34;下拉＆＃34;。每个标签下都有可点击的链接（锚标签）。我正在尝试编写一些可以打印文本的代码单击链接时在控制台中告诉用户单击链接的位置（它使用innerText）。例如，如果用户单击第一个选项卡下的链接，它将记录＆＃34;第1列| Link1＆＃ 34;或者如果用户点击第二个标签中的链接＆＃34;第2列|链接3＆＃34;。我所拥有的是嵌套的for循环，它将遍历每个div标签下的锚标签，但我不是确定它是否正确。这就是我所拥有的：

var dropdownDivs = document.getElementsByClassName('dropdown');
for(i = 0; i < dropdownDivs.length;i++) {
var lnks = 
document.getElementsByClassName('dropdown').getElementsByTagName('a');
for(i = 0; i < dropdownDivs.length;i++){ 
    for (var l in lnks) {
}};

Answer 1

通过查看您的代码，我建议您更改

document.getElementsByClassName('dropdown').getElementsByTag‌Name('a')

与

dropdownDivs[i].getElementsByTagName('a')

我这样说是因为document.getElementsByClassName（＆＃39; dropdown＆＃39;）将再次返回一个数组（顺便说一下你已经得到的数组）而不是相关的元素，它将被表示由

dropdownDivs[i]

Answer 2

为了在页面上获取DIV和Link（锚标记）的放置索引，您需要将其中至少一个收集到一个数组中以使用{{1获取索引方法。

您可以使用indexOf更轻松地抓取完成工作所需的元素。

注意：querySelectorAll返回一个HTMLCollection，不是一个数组。他们都有一个querySelectorAll方法所以我只想指出这一点。

forEach

＆＃13;

// get all anchor elements within an element with the class dropdown
 let collection = document.querySelectorAll(".dropdown a");

// iterate over links in elements with dropdown class
// parameters for forEach are (element, index)
  collection.forEach((ele, ind) => {

// we get the parent node(the element with the dropdown class)
// then we figure out what number element(div) we're on by looking at the array
// of all elements with the dropdown class

      let p = ele.parentNode;
      let p_ind = Array.from(document.querySelectorAll('.dropdown')).indexOf(p);

//we add 1 to the indices because there is a 0 index and we 
//would like to start at the first DIV/Link being a 1, not 0

      ind++;
      p_ind++;
//add an event listener to the links that alerts the results
//on click
    ele.addEventListener('click', () => alert("link " + ind + " in div" + p_ind))
    })

＆＃13;

let collection = document.querySelectorAll(".dropdown a");

collection.forEach((ele, ind) => {
let p = ele.parentNode;
let p_ind = Array.from(document.querySelectorAll('.dropdown')).indexOf(p);
ind++;
p_ind++;
ele.addEventListener('click', () => alert("link " + ind + " in div" + p_ind))
})

＆＃13;

div {
  border: 1px solid black;
  width: 75px;
  margin: 10px;
  padding: 10px;
}

＆＃13;

如何循环遍历具有相同类名的div标记中的锚标记

2 个答案: