Vérifier si un élément est un enfant d'un parent

Question

Vérifier si un élément est un enfant d'un parent

Demandé el 20 de Septembre, 2010: Quand la question a-t-elle été
23927 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai le code suivant.

<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>

J'attends seulement quand Child-Of-Hello en cliquant dessus, $('div#hello').parents(target).length retournera >0.

Cependant, cela se produit chaque fois que je clique sur n'importe quel endroit.

Y a-t-il un problème avec mon code ?

Demandé el 20 de Septembre, 2010 par Cheok Yan Cheng

Answer 1

5 Réponses

Answer 2

171voto

user113716 Points 143363

Si vous ne vous intéressez qu'au parent direct, et pas aux autres ancêtres, vous pouvez simplement utiliser parent() et lui donner le sélecteur, comme dans target.parent('div#hello') .

Exemple : 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');
    }
}

Ou si vous voulez vérifier s'il y a des ancêtres qui correspondent, alors utilisez .parents() .

Exemple : 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');
    }
}

Répondu el 20 de Septembre, 2010 par user113716 (143363 Points )

35 votes

Comment le faire sans jquery ?

Commenté el 28 de Août, 2015 par SuperUberDuper

Answer 3

72voto

Blazemonger Points 39230

.has() semble être conçu dans ce but. Puisqu'il renvoie un objet jQuery, vous devez tester la présence de .length également :

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

Répondu el 11 de Juin, 2013 par Blazemonger (39230 Points )

0 votes

@redanimalwar Exact, c'est ce que cela fait. Vous trouvez l'élément parent, puis vous vérifiez si target est à l'intérieur de celui-ci.

Commenté el 28 de Février, 2017 par Blazemonger

Answer 4

20voto

naitsirch Points 747

Si vous avez un élément qui n'a pas de sélecteur spécifique et que vous voulez quand même vérifier s'il est le descendant d'un autre élément, vous pouvez utiliser la méthode suivante jQuery.contains()

jQuery.contains( container, contained )
Description : Vérifie si un élément DOM est un descendant d'un autre élément DOM.

Vous pouvez passer l'élément parent et l'élément que vous voulez vérifier à cette fonction et elle renvoie si ce dernier est un descendant du premier.

Répondu el 15 de Novembre, 2013 par naitsirch (747 Points )

3 votes

Prêtez une attention particulière à $.contains en prenant des éléments du DOM et pas Les instances de jQuery, ou il retournera toujours false.

Commenté el 10 de Juillet, 2017 par aleclarson

0 votes

Un autre détail à retenir : $.contains ne retourne jamais vrai si les deux arguments sont le même élément. Si vous voulez cela, utilisez domElement.contains(domElement) .

Commenté el 10 de Juillet, 2017 par aleclarson

Answer 5

10voto

Lukas Points 622

J'ai fini par utiliser .closest() à la place.

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

Répondu el 30 de Avril, 2014 par Lukas (622 Points )

Answer 6

4voto

tttppp Points 999

Vous pouvez faire fonctionner votre code en échangeant simplement les deux termes :

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

Vous avez fait le tour de l'enfant et du parent dans le mauvais sens.

Répondu el 20 de Septembre, 2010 par tttppp (999 Points )

2 votes

var target = $(evt.target); Votre code devrait donc être le suivant if (target.parents('div#hello').length) { et non ...$(target)...

Commenté el 20 de Septembre, 2010 par Peter Ajtai

Vérifier si un élément est un enfant d'un parent

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Vérifier si un élément est un enfant d'un parent

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: