Get all anchor tag text from nested div tag using jquery

Solution 1:

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>

Solution 2:

It work, you did mistake here : <div="main-class"> should be <div class="main-class">

EDIT : if you want separate item, you rather use map();

var arr = $(".main-class").find(".header-text a").map(function() {
  return $(this).text();
}).get();

console.log(arr);

<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>

Get all anchor tag text from nested div tag using jquery

Solution 1:

Solution 2:

Related

Recent Posts