Question

在我的页面上，我有5个名为“dropdown”的div标签。我想在每个“dropdown”div标签下找到所有“a”标签。我希望我能正确解释这一点，但这就是我所拥有的。有人可以确认它是对的：

var dropdownDivs = document.getElementsByClassName('dropdown');
for(i = 0; i < dropdownDivs.length;i++)

var lnks = document.getElementsByClassName('dropdown').getElementsByTagName('a');

Answer 1

使用document.querySelectorAll('.dropdown a')。 querySelectorAll上的Here's the MDN。

Answer 2

var dropdownDivs = document.getElementsByClassName('dropdown');

var links = dropdownDivs.getElementsByTagName('a');

您不需要for循环。

How to get elements of specific class inside a div already found in JavaScript?

Answer 3

一行纯javascript

let test = document.querySelectorAll('.dropdown a');
console.log(test);

我的测试HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="dropdown">
        <a> TOTO </a>
    </div>
    <div class="test">
        <a> TOTOB </a>
    </div>
    <div class="dropdown">
        <a> TOTOC </a>
    </div>
    <div class="dropdown">
        <a> TOTOD </a>
    </div>
    <script type="text/javascript" src="test.js"></script>
</body>
</html>

Answer 4

你需要获取for循环中的链接：

var dropdownDivs = document.getElementsByClassName('dropdown');

var lnks = [];

for (i = 0; i < dropdownDivs.length; i++) {
  lnks.push(...dropdownDivs[i].getElementsByTagName('a'));
}
lnks.forEach(function(el) {
  el.style.color = "red";
});

<div class="dropdown">
  <a href="#">link</a>
</div>

<a href="#">link</a>

<div class="dropdown">
  <a href="#">link</a>
</div>

<div class="dropdown">
  <a href="#">link</a>
</div>

<a href="#">link</a>

您可以使用Document#querySelectorAll：

将其缩短为一次通话

var lnks = document.querySelectorAll('.dropdown a');

lnks.forEach(function(el) {
  el.style.color = "red";
})

<div class="dropdown">
  <a href="#">link</a>
</div>

<a href="#">link</a>

<div class="dropdown">
  <a href="#">link</a>
</div>

<div class="dropdown">
  <a href="#">link</a>
</div>

<a href="#">link</a>

Answer 5

我认为你的for循环本身可能是正确的。你的问题可能就是你在循环中用它做的事情。

const divs = document.getElementsByClassName('target');

for (let i = 0; i < divs.length; i++) {
  console.log(divs[i].getElementsByTagName('a')[0]);
}

<div class="target"><a href="A">A</a></div>
<div class="target"><a href="B">B</a></div>
<div class="target"><a href="C">C</a></div>
<div class="target"><a href="D">D</a></div>
<div class="target"><a href="E">E</a></div>

在您的示例中，您每次只是将它们设置为变量。如果有更多，那可能没问题。如果您尝试将它们全部收集到一个变量中，则需要将它们放入数组中。

const divs = document.getElementsByClassName('target');
let anchors = [];

for (let i = 0; i < divs.length; i++) {
  anchors.push(divs[i].getElementsByTagName('a')[0]);
}

console.log(anchors);

<div class="target"><a href="A">A</a></div>
<div class="target"><a href="B">B</a></div>
<div class="target"><a href="C">C</a></div>
<div class="target"><a href="D">D</a></div>
<div class="target"><a href="E">E</a></div>

Answer 6

正如其他人已经建议如何通过java脚本这样做，如果想要使用jquery，这可以提供帮助。

$(".dropdown").each(function(){
    $(this).find("a").each(function(){
    console.log(this);
  })
})

如何循环使用相同类名的div标签

6 个答案: