Meilleur moyen de savoir si l'élément est un descendant d'un autre

Question

Je suis en train d'implémenter jQuery et de sortir des librairies Prototype dans mon code, et je me demande si vous pourriez me donner le meilleur moyen d'implémenter cette fonctionnalité dans jQuery. Je suis familier avec la syntaxe descendant jQuery ancêtre >, mais je veux juste vérifier si un élément est un descendant par true de faux, comme le code ci-dessous: quelqu'un peut-il me donner la solution jQuery la plus efficace pour cela?

<div id="australopithecus"> 
    <div id="homo-herectus"> 
    <div id="homo-sapiens"></div> 
    </div> 
</div> 

$('homo-sapiens').descendantOf('australopithecus'); 
// -> true 

$('homo-herectus').descendantOf('homo-sapiens'); 
// -> false 

Answer 1

Je pense que vous pourriez profiter de la sélection de style CSS ici, avec la longueur de retour. Pas exactement vrai/faux, mais en vérifiant 0/1 comme un booléen devrait fonctionner. :)

Alternativement, vous pourriez faire quelque chose comme $ ('# parent'). Find ('# enfant') et vérifier la longueur là.

Answer 2

Vous pouvez tenter de .find() dans les éléments .children()

$("#lucy").find("#homo-erectus").length; 

Ou la direction opposée:

$("#homo-erectus").parents().find("#lucy").length; 

Answer 3

Que diriez-vous

$("#homo-herectus").parents().is("#australopithecus"); 

Answer 4

function descendantOf(parentId, childId) { 
    return ($('#'+parentId+' > #'+childId).length === 1); 
} 

Cela devrait fonctionner.

Comme il a été souligné dans le commentaire ci-dessous, si vous ne voulez pas qu'il soit juste descendants directs:

function descendantOf(parentId, childId) { 
    return ($('#'+childId, $('#'+parentId)).length === 1); 
} 

Answer 5

Vous pouvez utiliser la fonction is() comme ceci:

alert($('#homo-sapiens').is('#australopithecus *')); 
// -> true 

alert($('#homo-herectus').is('#homo-sapiens *')); 
// -> false 

Answer 6

Supposant de réécrire votre déclaration initiale:

$('#homo-sapiens').descendantOf('#australopithecus'); 

essayer de plugin:

(function($) { 
    $.fn.descendantOf = function(parentId) { 
     return this.closest(parentId).length != 0; 
    } 
})(jQuery) 

Answer 7

$.fn.descendantOf = function(element) { 
    element = $(element)[0]; 
    var current = this; 
    var body = document.body; 
    while (current && current != element && current != document.body) { 
     current = $(current).parent()[0]; 
    } 
    if (typeof(current) == "undefined" || typeof(current) == "null") { 
     return false; 
    } else if (current == element) { 
     return true; 
    } else if (current == document.body) { 
     return false; 
    } 
} 

Exemple :

<div id="foo"> 
    <div id="bar"> 
     <div id="baz"></div> 
    </div> 
</div> 

Et:

$('#foo').descendantOf('#bar'); // false 
$('#foo').descendantOf('#foo'); // false 
$('#foo').descendantOf(document.body); // true 
$('#bar').descendantOf('#foo'); // true 
$('#baz').descendantOf('#foo'); // true 

Answer 8

Dans jQuery 1.6, vous pouvez utiliser génériquement le code suivant, par exemple targetElt et parentElt peuvent tous deux être des éléments DOM ou objets jQuery-emballés, ainsi que des sélecteurs:

$(targetElt).closest(parentElt).length > 0 

Certains des autres réponses que vous besoin de se référer à des éléments par leur ID, ce qui est pas utile si vous ne disposez est un élément DOM sans ID.Aussi, si vous voulez vous assurer que le targetElt est un descendant strict de parentElt (en d'autres termes, vous ne voulez pas considérer parentElt comme son propre descendant), assurez-vous d'ajouter un targetElt != parentElt check avant votre appel au .closest(), ou utilisez .parents().find() comme le suggère Jonathan Sampson.

Answer 9

Meilleure méthode que je trouve utilise Dan G. Switzer, la méthode II trouve ici: http://blog.pengoworks.com/index.cfm/2008/9/24/Using-jQuery-to-determine-if-an-element-is-a-child-of-another-element

jQuery.fn.isChildOf = function(b){ 
    return (this.parents(b).length > 0); 
}; 

Ensuite, vous utilisez simplement le plugin comme:

$('homo-sapiens').isChildOf('australopithecus'); 
// -> true 

$('homo-herectus').isChildOf('homo-sapiens'); 
// -> false 

Answer 10

Avec jQuery> = 1.4 (2010), vous pouvez utiliser la fonction jQuery.contains()

très rapide Cette méthode statique fonctionne avec des éléments DOM, et non avec des éléments jQuery une nd renvoie true ou false.

jQuery.contains(container, descendant) 

Exemple: Pour vérifier si un élément est dans le document que vous pourriez faire ceci:

jQuery.contains(document.body, myElement) 

Mise à jour:

Il y a aussi une méthode DOM natif Node.contains() que tous les navigateurs depuis ie5 + supports. Ainsi, vous pouvez le faire sans jQuery:

document.body.contains(myElement) 

Answer 11

Une alternative à la plus proche() qui utilise (presque) le même principe de déplacement et ne comprend pas l'élément lui-même: child.parentsUntil(ancestor).last().parent().is(ancestor).

var child = $('#homo-sapiens'); 
var ancestor = $('#australopithecus'); 

console.log(child.parentsUntil(ancestor).last().parent().is(ancestor)); // true