Get values of headers into an array-CodePudding

I have some html as follows

<div  >
<h1 abc">16.6164378</h2>
<h3 >86.74592325165001</h3>
<h4 >17.971746264000004</h4>
<h5 >30.706248577159997</h5>
</div>
<div  >
<h1 abc">24.777777</h2>
<h3 >126.7654321</h3>
<h4 >67.678967969</h4>
<h5 >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.

CodePudding user response：

Without jQuery, a one liner solution using forEach

document.querySelectorAll('.xyz').forEach(child => console.log(child.innerText))

<div >
  <h1 >name1</h1>
  <h2 >16.6164378</h2>
  <h3 >86.74592325165001</h3>
  <h4 >17.971746264000004</h4>
  <h5 >30.706248577159997</h5>
</div>
<div >
  <h1 >name2</h1>
  <h2 >24.777777</h2>
  <h3 >126.7654321</h3>
  <h4 >67.678967969</h4>
  <h5 >90.7689789159997</h5>
</div>

CodePudding user response：

   
$( ".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  >
<h1 abc">16.6164378</h2>
<h3 >86.74592325165001</h3>
<h4 >17.971746264000004</h4>
<h5 >30.706248577159997</h5>
</div>
<div  >
<h1 abc">24.777777</h2>
<h3 >126.7654321</h3>
<h4 >67.678967969</h4>
<h5 >90.7689789159997</h5>
</div>

CodePudding user response：

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 >
  <h1 >name1</h1>
  <h2 >16.6164378</h2>
  <h3 >86.74592325165001</h3>
  <h4 >17.971746264000004</h4>
  <h5 >30.706248577159997</h5>
</div>
<div >
  <h1 >name2</h1>
  <h2 >24.777777</h2>
  <h3 >126.7654321</h3>
  <h4 >67.678967969</h4>
  <h5 >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 >
  <h1 >name1</h1>
  <h2 >16.6164378</h2>
  <h3 >86.74592325165001</h3>
  <h4 >17.971746264000004</h4>
  <h5 >30.706248577159997</h5>
</div>
<div >
  <h1 >name2</h1>
  <h2 >24.777777</h2>
  <h3 >126.7654321</h3>
  <h4 >67.678967969</h4>
  <h5 >90.7689789159997</h5>
</div>

Same results.