Verifica se un elemento è figlio di un genitore

Ho il seguente codice.Verifica se un elemento è figlio di un genitore

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

mi aspetto solo quando Child-Of-Hello essere cliccato, $('div#hello').parents(target).length tornerà> 0.

Tuttavia, succede solo quando clicco ovunque.

C'è qualcosa che non va nel mio codice?

fonte

2010-09-20 Cheok Yan Cheng

130

Se si è interessati solo al genitore diretto e non ad altri antenati, è sufficiente utilizzare parent() e assegnargli il selettore, come in target.parent('div#hello').

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

Oppure, se si desidera controllare per vedere se ci sono gli antenati quella partita, quindi utilizzare .parents().

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

fonte

2010-09-20 17:04:40 user113716

come farlo senza jquery? – SuperUberDuper

È possibile ottenere il codice per lavorare, semplicemente scambiando i due termini:

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

hai avuto il bambino e il genitore turno nel modo sbagliato.

fonte

2010-09-20 17:07:08 tttppp

'var target = $ (evt.target);' così il tuo codice dovrebbe leggere 'if (target.parents ('div # hello'). Length) {' e non '... $ (target) ...' –

.has() sembra essere progettato per questo scopo. Dal momento che restituisce un oggetto jQuery, si deve verificare .length così:

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

fonte

2013-06-11 13:31:37 Blazemonger

@redanimalwar A destra; questo è ciò che fa. Trova l'elemento genitore, quindi controlla se 'target' è all'interno di esso. – Blazemonger

Se si dispone di un elemento che non dispone di un selettore specifico e si vuole ancora per verificare se si tratta di un discendente di un altro elemento, è possibile utilizzare jQuery.contains()

jQuery.contains (container, contenuta)
Descrizione: Verificare se un elemento DOM è un discendente di un altro elemento DOM.

È possibile passare l'elemento padre e l'elemento che si desidera controllare per quella funzione e restituisce se quest'ultimo è un discendente del primo.

fonte

2013-11-15 11:50:50 naitsirch

Prestare particolare attenzione a '$ .contains 'prendendo elementi DOM e ** non ** istanze di jQuery, altrimenti restituirà sempre false. – aleclarson

Un altro dettaglio da ricordare: '$ .contains' non restituisce mai true se i due argomenti sono lo stesso elemento. Se lo desideri, usa 'domElement.contains (domElement)'. – aleclarson

Terminato utilizzando .closest().

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

fonte

2014-04-30 16:46:51 Lukas

In aggiunta alle altre risposte, è possibile utilizzare questo metodo meno noto per afferrare elementi di un certo genitore in questo modo,

$('child', 'parent');

Nel tuo caso, che sarebbe

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

Nota l'uso di virgole tra il bambino e il genitore e le loro virgolette separate.Se erano circondati dalle stesse citazioni

$('child, parent');

si avrebbe un oggetto contenente entrambi gli oggetti, indipendentemente dal fatto che esistono nel loro alberi di documenti.

fonte

2017-05-11 17:38:44

vaniglia 1-liner per IE8 +:

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

Qui, come funziona:

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>

fonte

2017-11-25 10:58:17

Verifica se un elemento è figlio di un genitore

risposta

Problemi correlati