Finden des nächsten Elements ohne jQuery

Ich versuche, das nächstgelegene Element mit einem bestimmten Tag-Namen ohne jquery zu finden. Wenn ich auf ein <th>klicke, möchte ich Zugriff auf das <tbody>für diese Tabelle erhalten. Vorschläge? Ich habe über Offset gelesen, aber nicht wirklich verstanden. Soll ich nur verwenden:

Angenommen, th ist bereits auf das angeklickte Element eingestellt

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

Wenig (sehr) spät zur Party, aber trotzdem. Dies sollte den Trick tun :

function closest(el, selector) {
    var matchesFn;

    // find vendor prefix
    ['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector','oMatchesSelector'].some(function(fn) {
        if (typeof document.body[fn] == 'function') {
            matchesFn = fn;
            return true;
        }
        return false;
    })

    var parent;

    // traverse parents
    while (el) {
        parent = el.parentElement;
        if (parent && parent[matchesFn](selector)) {
            return parent;
        }
        el = parent;
    }

    return null;
}

Sehr einfach:

el.closest('tbody')

Wird von allen Browsern außer IE unterstützt.
UPDATE : Edge unterstützt es jetzt auch.

Keine Notwendigkeit für jQuery. Wenn Sie jQuery's $(this).closest('tbody')durch ersetzen, $(this.closest('tbody'))wird die Leistung erheblich gesteigert, wenn das Element nicht gefunden wird.

Polyfill für IE:

if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector;
if (!Element.prototype.closest) Element.prototype.closest = function (selector) {
    var el = this;
    while (el) {
        if (el.matches(selector)) {
            return el;
        }
        el = el.parentElement;
    }
};

Beachten Sie, dass es keine gibt, returnwenn das Element nicht gefunden wurde, und effektiv zurückkehrt, undefinedwenn das nächstgelegene Element nicht gefunden wurde.

Weitere Informationen finden Sie unter: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

So erhalten Sie das nächstgelegene Element anhand des Tag-Namens ohne jQuery:

function getClosest(el, tag) {
  // this is necessary since nodeName is always in upper case
  tag = tag.toUpperCase();
  do {
    if (el.nodeName === tag) {
      // tag name is found! let's return it. :)
      return el;
    }
  } while (el = el.parentNode);

  // not found :(
  return null;
}

getClosest(th, 'tbody');

Hierzu gibt es eine standardisierte Funktion: Element.closest . Die meisten Browser außer IE11 unterstützen dies ( Details von caniuse.com ). Die MDN-Dokumente auch eine Polyfüllung, falls Sie auf ältere Browser abzielen müssen.

Um den nächsten tbodyElternteil zu finden, können thSie Folgendes tun:

th.closest('tbody');

Für den Fall, dass Sie die Funktion selbst schreiben möchten - hier ist, was ich mir ausgedacht habe:

function findClosestParent (startElement, fn) {
  var parent = startElement.parentElement;
  if (!parent) return undefined;
  return fn(parent) ? parent : findClosestParent(parent, fn);
}

Um das nächstgelegene übergeordnete Element anhand des Tag-Namens zu finden, können Sie es folgendermaßen verwenden:

findClosestParent(x, element => return element.tagName === "SECTION");

function closest(el, sel) {
    if (el != null)
        return el.matches(sel) ? el 
            : (el.querySelector(sel) 
                || closest(el.parentNode, sel));
}

Diese Lösung verwendet einige der neueren Funktionen der HTML 5-Spezifikation. Für die Verwendung dieser Funktion in älteren / inkompatiblen Browsern (sprich: Internet Explorer) ist eine Polyfüllung erforderlich.

Element.prototype.matches = (Element.prototype.matches || Element.prototype.mozMatchesSelector 
    || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector 
    || Element.prototype.webkitMatchesSelector || Element.prototype.webkitMatchesSelector);

Um die @ SalmanPK-Antwort zu erweitern

Sie können den Knoten als Selektor verwenden, was nützlich ist, wenn Sie mit Ereignissen wie Mouseover arbeiten.

function closest(el, selector) {
    if (typeof selector === 'string') {
        matches = el.webkitMatchesSelector ? 'webkitMatchesSelector' : (el.msMatchesSelector ? 'msMatchesSelector' : 'matches');
        while (el.parentElement) {
            if (el[matches](selector)) {
                return el
            };
            el = el.parentElement;
        }
    } else {
        while (el.parentElement) {
            if (el === selector) {
                return el
            };
            el = el.parentElement;
        }
    }

    return null;
}

Hier ist die einfache Funktion, die ich benutze: -

function closest(el, selector) {
    var matches = el.webkitMatchesSelector ? 'webkitMatchesSelector' : (el.msMatchesSelector ? 'msMatchesSelector' : 'matches');

    while (el.parentElement) {
        if (el[matches](selector)) return el;

        el = el.parentElement;
    }

    return null;
}

Zusammenfassung:

Um einen bestimmten Vorfahren zu finden, können wir verwenden:

Element.closest();

Diese Funktion verwendet eine CSS-Auswahlzeichenfolge als Argument. Anschließend wird der nächste Vorfahr des aktuellen Elements (oder des Elements selbst) zurückgegeben, der dem CSS-Selektor entspricht, der in den Argumenten übergeben wurde. Wenn es keinen Vorfahren gibt, wird er zurückkehren null.

Beispiel:

const child = document.querySelector('.child');
// select the child

console.dir(child.closest('.parent').className);
// check if there is any ancestor called parent

<div class="parent">
  <div></div>
  <div>
    <div></div>
    <div class="child"></div>
  </div>
</div>

Holen Sie sich das nächstgelegene DOM-Element in den Baum, das eine Klasse, ID, ein Datenattribut oder ein Tag enthält. Beinhaltet das Element selbst. Zurück zu IE6 unterstützt.

var getClosest = function (elem, selector) {

    var firstChar = selector.charAt(0);

    // Get closest match
    for ( ; elem && elem !== document; elem = elem.parentNode ) {

        // If selector is a class
        if ( firstChar === '.' ) {
            if ( elem.classList.contains( selector.substr(1) ) ) {
                return elem;
            }
        }

        // If selector is an ID
        if ( firstChar === '#' ) {
            if ( elem.id === selector.substr(1) ) {
                return elem;
            }
        } 

        // If selector is a data attribute
        if ( firstChar === '[' ) {
            if ( elem.hasAttribute( selector.substr(1, selector.length - 2) ) ) {
                return elem;
            }
        }

        // If selector is a tag
        if ( elem.tagName.toLowerCase() === selector ) {
            return elem;
        }

    }

    return false;

};

var elem = document.querySelector('#some-element');
var closest = getClosest(elem, '.some-class');
var closestLink = getClosest(elem, 'a');
var closestExcludingElement = getClosest(elem.parentNode, '.some-class');

Finden Sie die nächstgelegenen Elemente childNodes.

closest:function(el, selector,userMatchFn) {
var matchesFn;

// find vendor prefix
['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector','oMatchesSelector'].some(function(fn) {
    if (typeof document.body[fn] == 'function') {
        matchesFn = fn;
        return true;
    }
    return false;
});
function findInChilds(el){
    if(!el) return false;
    if(el && el[matchesFn] && el[matchesFn](selector)

    && userMatchFn(el) ) return [el];
    var resultAsArr=[];
    if(el.childNodes && el.childNodes.length){
        for(var i=0;i< el.childNodes.length;i++)
        {
             var child=el.childNodes[i];
             var resultForChild=findInChilds(child);
            if(resultForChild instanceof Array){
                for(var j=0;j<resultForChild.length;j++)
                {
                    resultAsArr.push(resultForChild[j]);
                }
            } 
        }

    }
    return resultAsArr.length?resultAsArr: false;
}

var parent;
if(!userMatchFn || arguments.length==2) userMatchFn=function(){return true;}
while (el) {
    parent = el.parentElement;
    result=findInChilds(parent);
    if (result)     return result;

    el = parent;
}

return null;

}}

Hier.

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

Findet nur Geschwister weiter unten im Baum. Verwenden Sie previousSibling , um den anderen Weg zu gehen, oder verwenden Sie Variablen, um beide Wege zu durchlaufen und den zuerst gefundenen zurückzugeben. Sie haben eine allgemeine Vorstellung davon, aber wenn Sie Elternknoten oder Kinder durchlaufen möchten, wenn ein Geschwister nicht übereinstimmt, können Sie auch jQuery verwenden. An diesem Punkt lohnt es sich leicht.

Ein bisschen zu spät zur Party, aber als ich vorbeikam und nur eine sehr ähnliche Frage beantwortete, lasse ich hier meine Lösung fallen - wir können sagen, es ist die JQuery closest() Ansatz, aber in einfach gutem alten JavaScript.

Es benötigt keine Pollyfills und es sind ältere Browser und IE (:-)) freundlich: https://stackoverflow.com/a/48726873/2816279

Ich denke, der einfachste Code, den man mit jquery am nächsten fangen kann:

<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>';
}
?>

Vielen Dank.