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