-5

I want to create a javascript array of all these following divs so I can write a for loop function over them. How should I create this array? Thanks

<div class="Org-popover-body-1">
1
</div>

<div class="Org-popover-body-2">
2
</div>

<div class="Org-popover-body-3">
3
</div>

<div class="Org-popover-body-4">
4
</div>

<div class="Org-popover-body-5">
5
</div>

<div class="Org-popover-body-6">
6
</div>
S.Xia
  • 35
  • 4
  • Possible duplicate of [Javascript array from all elements with a certain class name](https://stackoverflow.com/questions/7988719/javascript-array-from-all-elements-with-a-certain-class-name) – Nelson Teixeira Jul 03 '18 at 15:30
  • Welcome to StackOverflow. Please take some time to complete the [tour](http://stackoverflow.com/tour) and read the help topic [How to ask a good question](http://stackoverflow.com/help/how-to-ask) before posting. Good questions normally have a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). Also, StackOverflow has an [help center](http://stackoverflow.com/help) with lots of information. Thanks. – Nelson Teixeira Jul 03 '18 at 15:31

3 Answers3

2

Simply use document.querySelectorAll() method and a wildcard such as [class^="Org-popover-"] which matches any class that begins with Org-popover-

console.log(document.querySelectorAll('[class^="Org-popover-"]'));
<div class="Org-popover-body-1">
1
</div>

<div class="Org-popover-body-2">
2
</div>

<div class="Org-popover-body-3">
3
</div>

<div class="Org-popover-body-4">
4
</div>

<div class="Org-popover-body-5">
5
</div>

<div class="Org-popover-body-6">
6
</div>
Alex
  • 1,945
  • 1
  • 7
  • 20
2

Two different ways you could go about this. You can use the starts with selector on the class to find them all.

With the markup you have

console.log( document.querySelectorAll('[class^="Org-popover-body-"]') );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Org-popover-body-1">
1
</div>

<div class="Org-popover-body-2">
2
</div>

<div class="Org-popover-body-3">
3
</div>

<div class="Org-popover-body-4">
4
</div>

<div class="Org-popover-body-5">
5
</div>

<div class="Org-popover-body-6">
6
</div>

With a common class added.

You can give them all a common class and use that.

console.log( document.querySelectorAll('.Org-popover-body') );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Org-popover-body Org-popover-body-1">
    1
    </div>

    <div class="Org-popover-body Org-popover-body-2">
    2
    </div>

    <div class="Org-popover-body Org-popover-body-3">
    3
    </div>

    <div class="Org-popover-body Org-popover-body-4">
    4
    </div>

    <div class="Org-popover-body Org-popover-body-5">
    5
    </div>

    <div class="Org-popover-body Org-popover-body-6">
    6
    </div>
Taplar
  • 24,246
  • 4
  • 18
  • 33
1

Well would be easier if they had a common class, but since they do not, only option is attribute contains selector with querySelectorAll

var elems = document.querySelectorAll('[class*="Org-popover-body-"]')
console.log(elems)
<div class="Org-popover-body-1">
1
</div>

<div class="Org-popover-body-2">
2
</div>

<div class="Org-popover-body-3">
3
</div>

<div class="Org-popover-body-4">
4
</div>

<div class="Org-popover-body-5">
5
</div>

<div class="Org-popover-body-6">
6
</div>
epascarello
  • 185,306
  • 18
  • 175
  • 214
  • Would I be correct in pointing out that `[class*="Org-popover-body-"]` will match with any class e.g. `new-edited-Org-popover-body-` which is less specific than using the caret (`^`) to define it as the `start of` the class name? – Alex Jul 03 '18 at 20:21
  • so swap to ^ not a big deal in this case. Just used * in case there were other classes the OP did not show since it can be anywhere in the attribute. Start with can fail too it they had other classes that followed same pattern.... Only safe bet is use a class and not have to match partials. – epascarello Jul 03 '18 at 20:23
  • Yeah, you're right. I'm more concerned about the OP's possible restrictions. – Alex Jul 03 '18 at 20:24