Überprüfen Sie, ob ein Element ein untergeordnetes Element eines übergeordneten Elements ist

115

Ich habe den folgenden Code.

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>

<div id="hello">Hello <div>Child-Of-Hello</div></div>
<br />
<div id="goodbye">Goodbye <div>Child-Of-Goodbye</div></div>

<script type="text/javascript">
<!--
function fun(evt) {
    var target = $(evt.target);    
    if ($('div#hello').parents(target).length) {
        alert('Your clicked element is having div#hello as parent');
    }
}
$(document).bind('click', fun);
-->
</script>

</html>

Ich erwarte nur beim Child-Of-HelloKlicken $('div#hello').parents(target).length> 0 zurück.

Es passiert jedoch immer dann, wenn ich irgendwo auf etwas klicke.

Stimmt etwas mit meinem Code nicht?

javascript jquery Cheok Yan Cheng
quelle

159

Wenn Sie nur an dem direkten Elternteil und nicht an anderen Vorfahren interessiert sind, können Sie es einfach verwenden parent()und ihm den Selektor geben, wie in target.parent('div#hello').

Beispiel: http://jsfiddle.net/6BX9n/

function fun(evt) {
    var target = $(evt.target);    
    if (target.parent('div#hello').length) {
        alert('Your clicked element is having div#hello as parent');
    }
}

Oder wenn Sie überprüfen möchten, ob es übereinstimmende Vorfahren gibt, verwenden Sie .parents().

Beispiel: http://jsfiddle.net/6BX9n/1/

function fun(evt) {
    var target = $(evt.target);    
    if (target.parents('div#hello').length) {
        alert('Your clicked element is having div#hello as parent');
    }
}

user113716
quelle

19

wie geht das ohne jquery?

SuperUberDuper

60

.has()scheint für diesen Zweck ausgelegt zu sein. Da es ein jQuery-Objekt zurückgibt, müssen Sie auch Folgendes testen .length:

if ($('div#hello').has(target).length) {
   alert('Target is a child of #hello');
}

Blazemonger
quelle

@redanimalwar Richtig; das ist was das macht. Sie finden das übergeordnete Element und prüfen, ob targetes sich darin befindet.

Blazemonger

22

Vanille 1-Liner für IE8 +:

parent !== child && parent.contains(child);

Hier, wie es funktioniert:

function contains(parent, child) {
  return parent !== child && parent.contains(child);
}

var parentEl = document.querySelector('#parent'),
    childEl = document.querySelector('#child')
    
if (contains(parentEl, childEl)) {
  document.querySelector('#result').innerText = 'I confirm, that child is within parent el';
}

if (!contains(childEl, parentEl)) {
  document.querySelector('#result').innerText += ' and parent is not within child';
}

<div id="parent">
  <div>
    <table>
      <tr>
        <td><span id="child"></span></td>
      </tr>
    </table>
  </div>
</div>
<div id="result"></div>

Erweitern Sie das Snippet

Aleksandr Makov
quelle

Danke, das ist ziemlich erstaunlich! Die Rekursion ist cool. Ich frage mich, wie das Argument der Funktion (innerhalb) des Objekts wird, mit dem die Funktion arbeitet. Könnten Sie einen Link zu weiteren Informationen dazu haben?

JohnK

20

Wenn Sie ein Element haben, das keinen bestimmten Selektor hat, und dennoch prüfen möchten, ob es ein Nachkomme eines anderen Elements ist, können Sie jQuery.contains () verwenden.

jQuery.contains (Container, enthalten)
Beschreibung: Überprüfen Sie, ob ein DOM-Element ein Nachkomme eines anderen DOM-Elements ist.

Sie können das übergeordnete Element und das Element, das Sie überprüfen möchten, an diese Funktion übergeben und es wird zurückgegeben, wenn letzteres ein Nachkomme des ersten ist.

naitsirch
quelle

3

Achten Sie besonders darauf, $.containsDOM-Elemente und keine jQuery-Instanzen zu verwenden, da sonst immer false zurückgegeben wird.

Aleclarson

Ein weiteres zu beachtendes Detail: $.containsGibt niemals true zurück, wenn die beiden Argumente dasselbe Element sind. Wenn Sie das wollen, verwenden Sie domElement.contains(domElement).

Aleclarson

9

Endete stattdessen mit .closest ().

$(document).on("click", function (event) {
    if($(event.target).closest(".CustomControllerMainDiv").length == 1)
    alert('element is a child of the custom controller')
});

Lukas
quelle

3

Sie können Ihren Code zum Laufen bringen, indem Sie einfach die beiden Begriffe austauschen:

if ($(target).parents('div#hello').length) {

Sie hatten das Kind und die Eltern falsch herum.

tttppp
quelle

2

var target = $(evt.target);Also sollte Ihr Code lesen if (target.parents('div#hello').length) {und nicht...$(target)...

Peter Ajtai

0

Zusätzlich zu den anderen Antworten können Sie diese weniger bekannte Methode verwenden, um Elemente eines bestimmten Elternteils wie folgt zu erfassen:

$('child', 'parent');

In Ihrem Fall wäre das

if ($(event.target, 'div#hello')[0]) console.log(`${event.target.tagName} is an offspring of div#hello`);

Beachten Sie die Verwendung von Kommas zwischen dem Kind und dem Elternteil und deren separaten Anführungszeichen. Wenn sie von denselben Zitaten umgeben wären

$('child, parent');

Sie hätten ein Objekt, das beide Objekte enthält, unabhängig davon, ob sie in ihren Dokumentbäumen vorhanden sind.

Ich möchte Antworten
quelle

Dies ist ein cooler Hack, funktioniert aber nicht gut mit Elementen ohne IDs oder Klassen

aln447

Überprüfen Sie, ob ein Element ein untergeordnetes Element eines übergeordneten Elements ist

Antworten: