I'm trying to find the ID (test1, test2, test3 etc..) of the next instance of a specific class (findMe).
Here is my code: 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'));
})
I can find the ID "test2" but not "test3". Why?
The second .findMe's nearest ancestor with the third .findMe is a grandparent, not a parent. (The <tr> is inside a <tbody>.)
While you could fix it (kinda) by making your dynamic DOM navigation more flexible, an easier method I think would be to select all .findMes, then access the next index.
const findMes = $('.findMe');
const thisIndex = findMes.index(this);
console.log(findMes[thisIndex + 1]?.id);
You could also use getElementsByClassName, whose collection is live, instead of re-selecting all elements each time.