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> 

「main」div内にネストされたすべての「sub」divを返すためにQuerySelectorAllを使用しようとしています。イムは、現在

document.querySelectorAll(".main .sub") 

を使用しますが、これは、それはまた、それだけでクラスthatsのdivを選択することが可能となる「第3のサブ」クラス名「第2のサブ」かとdivを返すように、クラス名は「サブ」で始まるすべてのdivを返します。 「サブ」である。

私も

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

を使用した後の結果をクリックしますが、これは私が

.click() 

は、一度に1つのオブジェクトで動作するように設計されてbecasueこれがあると思うエラーを返します。それは をクラス名「サブ」で、すべてのdivを選択し、

と同様のものを使用してそれらをクリックすることが可能である

.click() 

Answer 1

あなたはこのセレクタを使用することができます。以下のように

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

あなたが結果項目を反復処理することができます.click `ことで

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

EDIT 1 - タイムアウト、閉じ範囲内setTimeoutコールを追加反復を参照し、所望の遅延と乗算簡単、各クリック間タイムアウト

：

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