Get all anchor tag text from nested div tag using jquery

January 19, 2022

I want to get all anchor tag links text and push them into array, so all links text will be available into array, I tried using jquery but due to nested div it is unable to get each link text separately

let data = []
$(".main-class").each((i, elem) => {
  data.push({
    link_text: $(elem).find(".header-text a").text()
  })
});
console.log(data)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div="main-class">

  <div class="upper-class">

    <section class="home-item">
      <div> some text here</div>
      <div class="header-text" >
        <a href="www.xyz.com">Link 1 text</a>
      </div>
      <div class="header-text" >
        <p></p>
      </div>
    </section>

    <section class="home-item">
      <div> some text here</div>
      <div class="header-text">
        <a href="www.xyz1.com">Link 2 text</a>
      </div>
      <div class="header-text">
        <p></p>
      </div>
    </section>

    <section class="home-item">
      <div> some text here</div>
      <div class="header-text">
        <a href="www.xyz2.com">Link 3 text</a>
      </div>
      <div class="header-text">
        <p></p>
      </div>
    </section>

  </div>

  </div>

>Solution :

The cause is that .find("a").text() will combine all the texts for all the as into a single text – that’s how jquery .text() works.

You need to "loop" each "a", not using a single .text() call against all of them.

Keeping to the nearest your code (with the .push), the simplest way is to change the selector, rather than add an inner .each

    let data = []
    $(".main-class .header-text a").each((i, elem) => {
      data.push({
        link_text: $(elem).text()
      })
    });

This can be shortened to a one-line by using .map which handles the creating of an array and .push for you:

let data2 = $(".main-class .header-text a").map((i, elem) => { return { link_text: elem.textContent }}).get();

Updated snippet (including typo fix)

let data = []
$(".main-class .header-text a").each((i, elem) => {
  data.push({
    link_text: $(elem).text()
  })
});
//console.log(data)

let data2 = $(".main-class .header-text a").map((i, elem) => { return { link_text: elem.textContent }}).get();
console.log(data2)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-class">

  <div class="upper-class">

    <section class="home-item">
      <div> some text here</div>
      <div class="header-text" >
        <a href="www.xyz.com">Link 1 text</a>
      </div>
      <div class="header-text" >
        <p></p>
      </div>
    </section>

    <section class="home-item">
      <div> some text here</div>
      <div class="header-text">
        <a href="www.xyz1.com">Link 2 text</a>
      </div>
      <div class="header-text">
        <p></p>
      </div>
    </section>

    <section class="home-item">
      <div> some text here</div>
      <div class="header-text">
        <a href="www.xyz2.com">Link 3 text</a>
      </div>
      <div class="header-text">
        <p></p>
      </div>
    </section>

  </div>

  </div>