Get values of headers into an array

Question

I have some html as follows

<div class="xyz" >
<h1 class="abc>name1</h1>
<h2 class="abc">16.6164378</h2>
<h3 class="abc">86.74592325165001</h3>
<h4 class="abc">17.971746264000004</h4>
<h5 class="abc">30.706248577159997</h5>
</div>
<div class="xyz" >
<h1 class="abc>name2</h1>
<h2 class="abc">24.777777</h2>
<h3 class="abc">126.7654321</h3>
<h4 class="abc">67.678967969</h4>
<h5 class="abc">90.7689789159997</h5>
</div>

I want to extract each value from h1 through h5 into an array. I'm trying $(".xyz") to get each set of headers, but how do I address the elements below this to get the values. I thought .each(function(index, value)) {} etc but I just don't know how to address each of the headers and get the values out.

Does this answer your question? [JQuery get all elements by class name](https://stackoverflow.com/questions/16630211/jquery-get-all-elements-by-class-name) — Abu Nooh, Jul 05 '22 at 22:23

score 1 · Accepted Answer · answered Jul 05 '22 at 22:34

You may need a more complex script, to loop over each Header element inside your loop. Consider the following.

$(function() {
  var myData = [];
  $(".xyz").each(function(i, block) {
    $(block).children().each(function(j, head) {
      myData.push($(head).text());
    });
  });
  console.log(myData);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="xyz">
  <h1 class="abc">name1</h1>
  <h2 class="abc">16.6164378</h2>
  <h3 class="abc">86.74592325165001</h3>
  <h4 class="abc">17.971746264000004</h4>
  <h5 class="abc">30.706248577159997</h5>
</div>
<div class="xyz ">
  <h1 class="abc">name2</h1>
  <h2 class="abc">24.777777</h2>
  <h3 class="abc">126.7654321</h3>
  <h4 class="abc">67.678967969</h4>
  <h5 class="abc">90.7689789159997</h5>
</div>

Remember that .each() is passed an Index and an Element, not a the Value. not to be confused with $.each().

This gets the Text Content of each header and pushes it into an Array. This is helpful if you have dynamic content or might not have Classes for each child element.

You can also do this like so, making use of the class on each element.

$(function() {
  var myData = [];
  $(".abc").each(function(i, head) {
    myData.push($(head).text());
  });
  console.log(myData);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="xyz">
  <h1 class="abc">name1</h1>
  <h2 class="abc">16.6164378</h2>
  <h3 class="abc">86.74592325165001</h3>
  <h4 class="abc">17.971746264000004</h4>
  <h5 class="abc">30.706248577159997</h5>
</div>
<div class="xyz ">
  <h1 class="abc">name2</h1>
  <h2 class="abc">24.777777</h2>
  <h3 class="abc">126.7654321</h3>
  <h4 class="abc">67.678967969</h4>
  <h5 class="abc">90.7689789159997</h5>
</div>

Same results.

This looks so simple, I can't believe I was thinking it was so complicated. Thanks — Pete Harrison, Jul 07 '22 at 08:40

score 0 · Answer 2 · answered Jul 05 '22 at 22:26

   
$( ".xyz" ).each(function( index ) {
  console.log($( this ).text() );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="xyz" >
<h1 class="abc>name1</h1>
<h2 class="abc">16.6164378</h2>
<h3 class="abc">86.74592325165001</h3>
<h4 class="abc">17.971746264000004</h4>
<h5 class="abc">30.706248577159997</h5>
</div>
<div class="xyz" >
<h1 class="abc>name2</h1>
<h2 class="abc">24.777777</h2>
<h3 class="abc">126.7654321</h3>
<h4 class="abc">67.678967969</h4>
<h5 class="abc">90.7689789159997</h5>
</div>

Get values of headers into an array

2 Answers2