create array from specific classes texts

Question

I need to create an array from all planet text:

<div class='planet'>earth</div>
<div class='planet'>sun</div>
<div class='planet'>moon</div>

var planets = JSON.stringify(Array.from($('.planet').text()));

console.log(planets);

In console I need:

["earth","sun","moon"]

Any help?

Wouldn’t that be just console.log(Array.from(document.querySelectorAll(".planet"), ({textContent}) => textContent)); — without jQuery? — Sebastian Simon
– Sebastian Simon, Commented Jun 14, 2018 at 5:25
@Xufox thanks, didn't realise Array.from supported a mapping function — Phil
– Phil, Commented Jun 14, 2018 at 5:30

Nisarg Shah · Accepted Answer · 2018-06-14 05:25:47Z

1

You can simply use document.querySelectorAll to select all those elements, use Array.from to get an array, and use Array.prototype.map to generate an array from it.

console.log(Array.from(document.querySelectorAll(".planet")).map(t => t.innerText));

<div class='planet'>earth</div>
<div class='planet'>sun</div>
<div class='planet'>moon</div>

answered Jun 14, 2018 at 5:25

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

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

Comments

Rupal · Accepted Answer · 2018-06-14 05:34:37Z

0

Use each function in jquery to traverse all the elements and then push in array.

planets=[]
$('.planet').each(function(){
planets.push($(this).text())
});

console.log(planets);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='planet'>earth</div>
<div class='planet'>sun</div>
<div class='planet'>moon</div>

answered Jun 14, 2018 at 5:34

Rupal

1,1096 silver badges17 bronze badges

Comments

flx · Accepted Answer · 2018-06-14 05:28:37Z

0

var arr = [];

document.querySelectorAll('.planet').forEach(elem => {
  arr.push(elem.textContent);
});

console.log(arr);

<div class='planet'>earth</div>
<div class='planet'>sun</div>
<div class='planet'>moon</div>

answered Jun 14, 2018 at 5:28

flx

1,57814 silver badges22 bronze badges

Comments

Nikhil Aggarwal · Accepted Answer · 2018-06-14 05:37:57Z

0

Use jQuery.each

var planets = [];

$('.planet').each((i, e) => planets.push($(e).text()));

console.log(planets);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='planet'>earth</div>
<div class='planet'>sun</div>
<div class='planet'>moon</div>

edited Jun 14, 2018 at 5:37

answered Jun 14, 2018 at 5:25

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

3 Comments

user7461846 Over a year ago

what is the purpose of i, e arguments in your example ?

Nikhil Aggarwal Over a year ago

@puerto - Nothing over here they are not required. Though i means the index and e means the element.

Nikhil Aggarwal Over a year ago

@puerto - I have updated the answer. See I can use e in place of this for getting values. Hope it clarifies.

Collectives™ on Stack Overflow

create array from specific classes texts

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related