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>

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

我试图使用QuerySelectorAll返回嵌套在“main”div中的所有“sub”div。我目前正在使用

document.querySelectorAll(".main .sub")

但是这将返回类名以“sub”开头的所有div，因此它也返回类名为“sub second”或“sub third”的div，可以只选择类是“sub”的div。

我还想在使用

后点击结果

document.querySelectorAll(".main .sub").click()

但这会返回错误，我认为这是因为

.click()

仅设计为一次使用一个对象。是否可以选择类名为“sub”的所有div，然后使用类似于

的内容单击它们

.click()

Answer 1

在此处查看已接受的答案：Fastest way to convert JavaScript NodeList to Array?

Array.prototype.slice.call(document.querySelectorAll(".main .sub")).forEach(function (el, i) {
    (function (a) {
        setTimeout(function () {
            el.click();
        }, (10 * 1000) * a);
    })(i);
})

编辑1 - 超时

要在每次点击之间超时，只需在封闭范围内添加setTimeout调用，引用迭代并乘以所需的延迟：

document.querySelectorAll(".main [class='sub']")

Answer 2

您可以使用此选择器：

var divs = document.querySelectorAll(".main [class='sub']");

[].forEach.call(divs, function(div) {
  // do whatever
  div.style.color = "red";
});

您可以按如下方式迭代结果项：

<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>

<div class="main">
    <p>I don't want this</p>
    <div class="sub second">I don't want this</div>
</div>

nvarchar

QuerySelectorAll返回的结果超出预期

2 个答案: