La mejor manera de averiguar si el elemento es descendiente de otro

Question

Estoy en el proceso de implementar jQuery, y de eliminar las bibliotecas Prototype en mi base de código, y me pregunto si podría darme la mejor manera de implementar esta funcionalidad en jQuery. Estoy familiarizado con la sintaxis descendiente jQuery >, pero solo quiero comprobar si un elemento es un descendiente por verdadero o falso, como el siguiente código: ¿alguien me puede dar la solución jQuery más eficiente para esto?

<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

Me gustaría pensar que podría tomar ventaja de la selección de estilos CSS aquí, con longitud devuelta.

$('#australopithecus #homo-sapiens').length // Should be 1 
$('#homo-sapiens #homo-herectus').length // Should be 0 

No exactamente verdadero/falso, pero verificar 0/1 como booleano debería funcionar. :)

Alternativamente, podría hacer algo como $ ('# parent'). Find ('# child') y verificar la longitud allí.

Answer 2

Se podría tratar de .find() en los Elementos .children()

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

O la dirección opuesta:

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

Answer 3

¿Qué tal

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

Answer 4

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

Eso debería funcionar.

Como se ha señalado en el comentario anterior, si no se quiere que sea justo descendientes directos:

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

Answer 5

Usted puede utilizar la función de is() así:

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

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

Answer 6

Suponiendo que volver a escribir su declaración inicial en:

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

tratar 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; 
    } 
} 

Ejemplo :

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

Y:

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

Answer 8

En jQuery 1.6, puede utilizar el siguiente código de forma genérica, por ejemplo, targetElt y parentElt pueden ser ambos elementos DOM u objetos envueltos-jQuery, así como selectores:

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

Algunas de las otras respuestas requieren que se refieren a los elementos por sus identificadores, que no es útil si todo lo que tiene es un elemento DOM sin una ID.Además, si desea asegurarse de que targetElt es un descendiente estricto de parentElt (en otras palabras, no desea contar parentElt como su propio descendiente), asegúrese de agregar una verificación targetElt != parentElt antes de llamar al .closest(), o use .parents().find() como lo sugiere Jonathan Sampson.

Answer 9

mejor método que he encontrado es el uso de Dan G. Switzer, el método de la Segunda encontrar aquí: 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); 
}; 

allí tendría que sólo tiene que utilizar el plugin como:

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

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

Answer 10

con jQuery> = 1.4 (2010) puede usar la función muy rápida jQuery.contains()

Este método estático funciona con elementos DOM, no con elementos jQuery a nd devuelve true o false.

jQuery.contains(container, descendant) 

Ejemplo: Para comprobar si un elemento se encuentra en el documento que puede hacer esto:

jQuery.contains(document.body, myElement) 

Actualización:

También hay un método DOM nativa Node.contains() que todos los navegadores desde ie5 + soportes. Por lo que puede hacerlo sin jQuery:

document.body.contains(myElement) 

Answer 11

Una alternativa a la más cercana() que utiliza (casi) el mismo principio transversal y no incluye el elemento en sí: child.parentsUntil(ancestor).last().parent().is(ancestor).

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

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