QuerySelectorAll returns more than expected

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>

Im trying to use QuerySelectorAll to return all "sub" divs nested inside "main" divs. Im currently using

document.querySelectorAll(".main .sub")

but this returns all divs that class name begins with "sub" so it also return divs with the class name "sub second" or "sub third" is it possible to just select divs thats class are "sub".

I also want to click on the results after using

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

but this returns an error i think this is becasue

.click()

is only designed to work with one object at a time. Is it possible to select all divs with the class name "sub" and then click on them using something similar to

.click()

[link] (http://www.w3schools.com/jsref/met_html_click.asp) I'm talking about this — A. Seidel, Jun 21 '16 at 12:47

score 0 · Answer 1 · edited May 23 '17 at 10:34

0

Look at the accepted answer here: Fastest way to convert JavaScript NodeList to Array?

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

EDIT 1 - Timeout

To timeout between each click, simple add a setTimeout call within a closed scope, reference the iteration and multiply with the desired delay:

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

edited May 23 '17 at 10:34

Community

1
1

answered Jun 21 '16 at 12:22

Emil S. Jørgensen

6,216
1
15
28

This is only one part of the answer ... it doesn't address the `class="sub"` issue – devnull69 Jun 21 '16 at 12:25
is it possible to add a 10 second delay before each click? – A. Seidel Jun 21 '16 at 13:13
@A.Seidel Sure, just add a [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout) around each click in the loop and delay by `iteration`. I'll edit the answer. – Emil S. Jørgensen Jun 21 '16 at 13:35

Mohammad Usman · Accepted Answer · 2016-06-21T12:33:37.013

You can use this selector:

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

You can iterate over result items as follows:

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>

QuerySelectorAll returns more than expected

2 Answers2