Trouver l'élément le plus proche sans jQuery

Question

J'essaie de trouver l'élément le plus proche avec un nom de balise spécifique sans jquery. Lorsque je clique sur un <th> Je veux avoir accès à la <tbody> pour cette table. Des suggestions ? J'ai lu des articles sur le décalage mais je n'ai pas trop compris. Devrais-je simplement utiliser :

Supposons que th est déjà fixé à l'élément cliqué th

th.offsetParent.getElementsByTagName('tbody')[0]

Answer 1

Ici.

function findNearest(el, tag) {
    while( el && el.tagName && el.tagName !== tag.toUpperCase()) {
        el = el.nextSibling;     
    } return el;
} 

Il ne trouve que des frères et sœurs plus bas dans l'arbre. Utilisez précédentSibling pour aller dans l'autre sens Ou utilisez des variables pour parcourir les deux sens et renvoyer celui qui est trouvé en premier. Vous avez compris l'idée générale, mais si vous voulez parcourir les parentNodes ou les enfants si un frère ou une sœur ne correspond pas, vous pouvez tout aussi bien utiliser jQuery. À ce stade, le jeu en vaut la chandelle.

Answer 2

J'arrive un peu tard dans la soirée, mais comme je passais par là et que je viens de répondre à une question très similaire, je dépose ici ma solution - on peut dire que c'est le JQuery closest() mais en bon vieux JavaScript.

Il n'a pas besoin de pollyfill et il est compatible avec les anciens navigateurs et IE (:-) ) : https://stackoverflow.com/a/48726873/2816279

Answer 3

Je pense que le code le plus facile à attraper avec jquery le plus proche :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".add").on("click", function () {
            var v = $(this).closest(".division").find("input[name='roll']").val();
            alert(v);
        });
    });
</script>
<?php

for ($i = 1; $i <= 5; $i++) {
    echo'<div class = "division">'
        . '<form method="POST" action="">'
        . '<p><input type="number" name="roll" placeholder="Enter Roll"></p>'
        . '<p><input type="button" class="add" name = "submit" value = "Click"></p>'
        . '</form></div>';
}
?>

Merci beaucoup.