Un sitio web en Chrome tiene la siguiente estructura:
<div class="divClass"> <a class="aClass"></a> <a class="aClass"></a> <a class="aClass"></a> </div>Estoy usando JQuery para obtener todos los elementos "a" dentro del div. Todos tienen la misma clase. El código que estoy usando en devTools es este:
$("div[class='divClass'] > a")Pero solo devuelve el primer elemento "a". ¿Cómo puedo obtener todos ellos?
Retazo:
console.log($("div[class='divClass'] > a")) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="divClass"> <a class="aClass"></a> <a class="aClass"></a> <a class="aClass"></a> </div>Puedes usar $('.divClass > a')
Una alternativa es usar find() que obtiene los descendientes de cada elemento en el conjunto actual de elementos coincidentes, por lo que puede ser útil aquí.
$(".divClass").find("a") Más sobre find - https://api.jquery.com/find/
usar el método .child,
/* var a1 = $(".divClass").children("a")[0].text; var a2 = $(".divClass").children("a")[1].text; var a3 = $(".divClass").children("a")[2].text; */ var aaa = $(".divClass").children("a").text(); console.log(aaa);Puede usar un selector diferente, por ejemplo:
$(".divClass > a.aClass") Esto encontrará todas las etiquetas con clase aClass que son hijos inmediatos de a elemento con clase divClass . Si desea encontrar todos los elementos secundarios en todo el árbol DOM (es decir, nietos, bisnietos, etc.), puede omitir el operador > .
Luego puede actuar sobre todos los elementos que coincidan con estos criterios (por ejemplo .addClass("found") , o recorrerlos individualmente usando .each( function() { ....}) si necesita extraer información específica del elemento de ellos .
La demostración a continuación está completamente comentada.
MANIFESTACIÓN
// Add click event to test button $("#test").click( function() { // ACT ON ALL IN ONE LINE // Use jquery to find all direct children of elements with class divClass that are 'a' tags with class 'aClass' // Add red border using CSS styles $(".divClass > a.aClass").addClass("directChildren"); // Find grandchildren, great grandchildren, etc // Turn color of text blue using CSS $(".divClass a.aClass").addClass("allChildren"); // HOW TO CYCLE TRHOUGH EACH LINK // Cycle through each, find them using same technique as above $(".divClass > a.aClass").each( function() { // Prove we've found each individual link console.log($(this).text()); }); }); .directChildren { border: red 2px solid; } .allChildren { color: blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="divClass"> <a class="aClass">Link 1</a> <a class="aClass">Link 2</a> <a class="aClass">Link 3</a> <div style="padding:12px;"> <a class="aClass">Grandchild Link 1</a> </div> </div> <button id="test">Find Children</button>