Question

<div class="main">
    <p>I don't want this</p>
    <div class="sub">I want this</div>
</div>

<div class="main">
    <p>I don't want this</p>
    <div class="sub">I want this</div>
</div>

任何人都知道如何选择所有＆＃34; sub＆＃34;里面的元素＆＃34; main＆＃34;元素。我试过了 document.getElementsByClassName("main").getElementsByClassName("sub")
但这并不奏效。为了澄清我想得到所有＆＃34; sub＆＃34;里面的元素＆＃34; main＆＃34;课程，但不能弄清楚如何。任何帮助将不胜感激

Answer 1

只需使用带有document.querySelectorAll()的选择器：

var subs = document.querySelectorAll('.main .sub');

但是，您发布的HTML不会将.sub元素放在.main元素中;他们是兄弟姐妹;在这种情况下：

var subs = document.querySelectorAll('.main + .sub');

或者：

var subs = document.querySelectorAll('.sub');

Answer 2

您的代码无效，因为document.getElementsByClassName("main")的结果是HTMLCollection（一种元素列表），因此您需要迭代此列表中的每个项目并调用每个元素都有.getElementsByClassName("sub")并连接所有结果列表。

但有一种更简单的方法。今天的浏览器支持document.querySelectorAll，因此您可以使用

var elements = document.querySelectorAll('.main .sub');

示例代码中的.sub个元素也没有嵌套在.main中。所以，上述结果无论如何都是空的。

Answer 3

目前，在您的示例中，HTML中没有子类。您的HTML应该是这样的：

<div class="main">I don't want this
    <div class="sub">I want this</div>
</div>

Answer 4

document.getElementsByClassName("sub")足以选择示例中的.sub元素。

如何选择所有＆＃34; sub＆＃34;里面的元素＆＃34; main＆＃34;分子

4 个答案: