QuerySelectorAll返回比预期的更多

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返回嵌套在“主”div中的所有“子”div。即时通讯目前使用

document.querySelectorAll(".main .sub") 

，但它返回类名称以“子”，因此它也与类名“子第二”或“分三”是它可能只是选择的div这就是类返回的div的所有div是“子”。

我也想用

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

之后点击的结果，但这返回一个错误，我认为这是becasue

.click() 

仅设计为一次一个对象的工作。是否有可能选择与类名“亚健康”的所有div，然后在接受的答案点击他们使用类似的东西来

.click() 

Answer 1

您可以使用此选择：

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

如下可以遍历结果项：

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>

Answer 2

看吧：Fastest way to convert JavaScript NodeList to Array?

Array.prototype.slice.call(document.querySelectorAll(".main .sub")).forEach(function(el){ 
    el.click(); 
}) 

编辑1 - 超时

要在每次点击之间暂停，只需在封闭范围内添加一个setTimeout调用，参考迭代并乘以期望的延迟：

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