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