Quiero obtener todo el texto de los enlaces de las etiquetas de anclaje e insertarlos en la matriz, de modo que todo el texto de los enlaces esté disponible en la matriz. Intenté usar jquery, pero debido a la div anidada, no puedo obtener cada texto de enlace por separado.
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>La causa es que .find("a").text() combinará todos los textos para todos los a en un solo texto; así es como funciona jquery .text() .
Debe "repetir" cada "a", sin usar una sola llamada .text() contra todos ellos.
Manteniéndose lo más cercano a su código (con .push ), la forma más sencilla es cambiar el selector, en lugar de agregar un .each interno
let data = [] $(".main-class .header-text a").each((i, elem) => { data.push({ link_text: $(elem).text() }) }); Esto se puede acortar a una sola línea usando .map que maneja la creación de una matriz y .push por usted:
let data2 = $(".main-class .header-text a").map((i, elem) => { return { link_text: elem.textContent }}).get();Fragmento actualizado (incluida la corrección de errores tipográficos)
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>Funciona, te equivocaste aquí: <div="main-class"> debería ser <div class="main-class">
EDITAR: si desea un elemento separado, prefiere usar 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>