如何遍历具有相同类名的div标签中的锚标签答案

【问题标题】：How to loop through anchor tags within div tags which have the same class name如何遍历具有相同类名的div标签中的锚标签
【发布时间】：2017-10-16 19:31:01
【问题描述】：

我网站上的标题有 5 个标签（它们是 div 标签，都名为“下拉菜单”。每个标签下都是可点击的链接（锚标签）。我正在尝试编写一些代码，当出现链接是点击并告诉用户它被点击的位置（它使用innerText）。例如，如果用户点击第一个选项卡下的链接，它将记录“column 1| Link1”或者如果用户点击链接在第二个选项卡“第 2 列 | 链接 3”中。我所拥有的只是嵌套的 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) {
}};

【问题讨论】：

问题是什么？
你有可以发布的 HTML 来配合那个脚本吗？
是的，我愿意。我有 HTML。但这是一个大型网站，它有很多 html 代码。但我正在尝试在网站标题中捕获分析。

标签： javascript

【解决方案1】：

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

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

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

// 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))
    })

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))
})

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

<div class="dropdown">
  <a href="#">hi</a>
    <a href="#">bye</a>
</div>
<div class="dropdown">
    <a href="#">hi</a>
    <a href="#">bye</a>
</div>
<div class="dropdown">
    <a href="#">hi</a>
    <a href="#">bye</a>
</div>
<div class="dropdown">
    <a href="#">hi</a>
    <a href="#">bye</a>
</div>
<div class="dropdown">
    <a href="#">hi</a>
    <a href="#">bye</a>
</div>

【讨论】：

谢谢。这正是我想要做的。没有 JQuery 有办法吗？
@PinkNGreen 这实际上只是 JavaScript :)
哦，我看到 Query 并自动认为它是 Jquery。大声笑感谢您的帮助！
@PinkNGreen 没问题！如果这是您正在寻找的答案，请不要忘记检查我的答案旁边的绿色复选标记，以便它也可以帮助其他人！

【解决方案2】：

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

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

与

dropdownDivs[i].getElementsByTagName('a')

我这样说是因为 document.getElementsByClassName('dropdown') 将再次返回一个数组（顺便说一下，一个你已经得到的数组）而不是有问题的元素，它将由

dropdownDivs[i]

【讨论】：