Testen von Objekten auf Vorfahren/Abkömmlinge in JavaScript oder Jquery

Question

Ich versuche, mit einem wiederverwendbaren JS oder jQuery-Funktion, die mir erlauben würde, zu testen, wenn ein Objekt ein DOM Nachkomme eines anderen ist zu kommen.

Ich habe ein Modell für die Prüfung von

$b.parents('nodename').length>0

Das ist fantastisch, wenn Sie nur prüfen müssen, ob ein Element ein Kind eines Knotens mit diesem Namen ist.

Aber was ist mit einem bestimmten Knoten? Sie können nicht testen

$b.parents($a).length>0

Denn jQuery Parents nimmt einen nodename-Ausdruck als Argument zum Filtern.

Als ein wenig Hintergrund, ich versuche zu testen, ob das Ziel eines Dokument-Klick-Ereignisses ein Kind eines bestimmten Objekts ist. Zum Beispiel, wenn das event.target ein Kind von $b ist, geben Sie true zurück, sonst geben Sie false zurück. Aber diese Funktion könnte später noch andere Auswirkungen haben.

Danke!

Answer 1

a.contains(b)

Dies ist eine reine JavaScript-Lösung mit Node.enthält . Die Funktion ist umfassend, a.contains(a) wird als wahr ausgewertet.

Im IE9 gibt es einen Sonderfall: Wenn b ist ein Textknoten, contains wird immer false zurückgeben.

Answer 2

En jQuery-Ahnen mit jQuery-Objekten Ich schlug vor

if ($(obj1).parents().index($(obj2)) >= 0) {
    // obj1 is a descendant of obj2
}

Answer 3

Versuchen Sie dies:

$('#foo').filter(function(){

   return $(this).parent().is('#foo-parent');

});

Hier werden also alle foo-Elemente ausgewählt und dann nur die Elemente gefiltert, die das foo-parent als unmittelbaren Elternteil haben.

Wenn Sie herausfinden wollen, ob einer der Vorfahren des aktuellen Objekts die Regel erfüllt, dann sollte es wohl so sein:

$('#foo').filter(function(){

   return $(this).parents().is('#foo-parent');

});

Answer 4

Alexey Lebedevs Antwort hat bei mir nicht funktioniert, weil Node.contains ist umfassend.

Wenn die übergeordnetes Element sollte sich von seinem möglichen Nachkommen unterscheiden -das war mein Anwendungsfall-, dann brauchen wir eine etwas andere Lösung: Wir könnten die Node.contains an die direkten Nachkommen des Elternteils unter Verwendung der Element.children Eigentum:

const sapiens = document.querySelector("#homo-sapiens")

const isSapiensAnAustralopithecusDescendant = [
  ...document.querySelector("#australopithecus").children
].some(child => child?.contains(sapiens))

console.log(isSapiensAnAustralopithecusDescendant) // true

<div id="australopithecus">
  <div id="homo-erectus">
    <div id="homo-neanderthalensis"></div>
    <div id="homo-sapiens"></div>
  </div>
</div>

Auf diese Weise, Node.contains vergleicht den möglichen Nachkommen mit dem angegebenen Kind und dessen Kindern.

Eine andere Lösung könnte die Element.closest Methode. Wenn Sie diese Methode verwenden, sollten Sie jedoch bedenken, dass sollten Sie es bei dem möglichen Nachkommen aufrufen porque Element.closest sagt uns, wer der Vorfahre eines Elements ist .

Außerdem ist die Funktion inklusiv; wenn Sie also document.body.closest("body") wird das Ergebnis sein document.body . Element.closest gibt das nächstgelegene Element mit dem angegebenen Selektor oder null .

Wenn Ihr Anwendungsfall erfordert, dass Elternteil und möglicher Nachkomme unterschiedlich sind, dann könnten wir anwenden Element.closest an den Elternteil des möglichen Nachkommens:

const sapiens = document.querySelector("#homo-sapiens");

const isAustralopithecusAnAncestorOfSapiens = sapiens.parentElement.closest("#australopithecus")

console.log(isAustralopithecusAnAncestorOfSapiens != null) // true

<div id="australopithecus">
  <div id="homo-erectus">
    <div id="homo-neanderthalensis"></div>
    <div id="homo-sapiens"></div>
  </div>
</div>