Estoy tratando de encontrar el ID (test1, test2, test3, etc.) de la próxima instancia de una clase específica (findMe).
Aquí está mi código: HTML:
<div class="container"> <table> <tr id="test1" class="findMe"> <td> <button class="next">Next</button> </td> </tr> <tr id="test2" class="findMe"> <td> <button class="next">Next</button> </td> </tr> </table> <div id="test3" class="findMe"> </div> </container>JS:
$(".next").click(function() { console.log($(this).parent().closest(".findMe").next().attr('id')); })Puedo encontrar el ID "test2" pero no "test3". ¿Por qué?
El antepasado más cercano del segundo .findMe con el tercer .findMe es un abuelo , no un padre. (El <tr> está dentro de un <tbody> .)
Si bien podría solucionarlo (más o menos) haciendo que su navegación DOM dinámica sea más flexible, creo que un método más fácil sería seleccionar todos los .findMe y luego acceder al siguiente índice.
const findMes = $('.findMe'); const thisIndex = findMes.index(this); console.log(findMes[thisIndex + 1]?.id); También podría usar getElementsByClassName , cuya colección está activa, en lugar de volver a seleccionar todos los elementos cada vez.