javascript create an array [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 7 years ago.

Improve this question

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>

Possible duplicate of Javascript array from all elements with a certain class name — Nelson Teixeira
– Nelson Teixeira, Commented Jul 3, 2018 at 15:30
Welcome to StackOverflow. Please take some time to complete the tour and read the help topic How to ask a good question before posting. Good questions normally have a Minimal, Complete, and Verifiable example. Also, StackOverflow has an help center with lots of information. Thanks. — Nelson Teixeira
– Nelson Teixeira, Commented Jul 3, 2018 at 15:31

Alex · Accepted Answer · 2018-07-03 15:28:52Z

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>

answered Jul 3, 2018 at 15:28

Alex

2,2321 gold badge12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Taplar · Accepted Answer · 2018-07-03 15:32:55Z

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>

edited Jul 3, 2018 at 15:32

answered Jul 3, 2018 at 15:30

Taplar

25k4 gold badges24 silver badges36 bronze badges

3 Comments

Alex Over a year ago

Tags: javascript arrays for-loop, no jQuery

Taplar Over a year ago

@Alex refactored

Alex Over a year ago

Bootiful! Very bootiful!

epascarello · Accepted Answer · 2018-07-03 15:28:36Z

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>

answered Jul 3, 2018 at 15:28

epascarello

208k20 gold badges206 silver badges246 bronze badges

3 Comments

Alex Over a year ago

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?

epascarello Over a year ago

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.

Alex Over a year ago

Yeah, you're right. I'm more concerned about the OP's possible restrictions.

Collectives™ on Stack Overflow

javascript create an array [closed]

3 Answers 3

Comments

With the markup you have

With a common class added.

3 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

With the markup you have

With a common class added.

3 Comments

3 Comments

Linked

Related