Il modo migliore per scoprire se l'elemento è un discendente di un altro

Question

Sono in procinto di implementare jQuery e rimuovere le librerie di Prototipi nella mia base di codice, e mi chiedo se potresti darmi il modo migliore per implementare questa funzionalità in jQuery. Ho familiarità con la sintassi discendente di jQuery antenato >, ma voglio solo verificare se un elemento è un discendente per vero di falso, come il seguente codice: qualcuno può darmi la soluzione jQuery più efficiente per questo?

<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

penserei si potrebbe approfittare di selezione di stile CSS qui, con lunghezza restituita. .

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

Non è esattamente vero/falso, ma controllando 0/1 come un valore booleano dovrebbe funzionare. :)

In alternativa, si potrebbe fare qualcosa come $ ('genitore #'). Find ('# figlio') e controllare la lunghezza lì.

Answer 2

Si potrebbe tentare di .find() nella Elementi .children()

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

o la direzione opposta:

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

Answer 3

Come su

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

Answer 4

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

Questo dovrebbe funzionare.

Come ricordato nel commento qui sotto, se non si vuole che sia discendenti diretti solo:

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

Answer 5

È possibile utilizzare la funzione is() in questo modo:

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

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

Answer 6

Supponendo di riscrivere la sua dichiarazione iniziale:

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

cercare di 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; 
    } 
} 

Esempio :

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

E:

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

Answer 8

In jQuery 1.6, è possibile utilizzare il seguente codice generico, per esempio targetElt e parentElt possono essere entrambi elementi DOM o oggetti jQuery-avvolti, così come i selettori:

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

Alcune delle altre risposte che richiedono di fare riferimento a elementi dal loro ID, che non è utile se tutto quello che hai è un elemento DOM senza ID.Inoltre, se vuoi assicurarti che targetElt sia un discendente rigoroso di parentElt (in altre parole, non vuoi contare parentElt come discendente proprio), assicurati di aggiungere un controllo targetElt != parentElt prima di chiamare allo .closest(), o utilizzare .parents().find() come suggerisce Jonathan Sampson.

Answer 9

metodo migliore che ho trovato è usare Dan G. Switzer, il metodo di II trovato qui: 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); 
}; 

allora si sarebbe semplicemente usare il plugin come:

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

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

Answer 10

con jQuery> = 1.4 (2010) è possibile utilizzare la funzione molto veloce jQuery.contains()

Questo metodo statico funziona con elementi DOM, non con elementi jQuery a nd restituisce true o false.

jQuery.contains(container, descendant) 

Esempio: Per controllare se un elemento è nel documento che si potrebbe fare questo:

jQuery.contains(document.body, myElement) 

Aggiornamento:

C'è anche un metodo DOM nativo Node.contains() che tutti i browser dal ie5 + supporta. Così si può fare senza jQuery:

document.body.contains(myElement) 

Answer 11

Un'alternativa più vicino() che utilizza (quasi) lo stesso principio di traslazione e non include l'elemento stesso: child.parentsUntil(ancestor).last().parent().is(ancestor).

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

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