使用 jquery 从嵌套的 div 标签中获取所有锚标签文本

Question

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>

Answer 1

The cause is that .find("a").text() will combine all the texts for all the a s 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>

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