primer - parent jquery ejemplos
Verificar si un elemento es hijo de un padre (7)
tengo el siguiente código.
<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>
Supongo que solo cuando se $(''div#hello'').parents(target).length clic en Child-Of-Hello , $(''div#hello'').parents(target).length devolverá> 0.
Sin embargo, simplemente sucede cada vez que hago clic en cualquier lugar.
¿Hay algún problema con mi código?
Además de las otras respuestas, puede usar este método menos conocido para tomar elementos de un determinado padre como tal,
$(''child'', ''parent'');
En tu caso, eso sería
if ($(event.target, ''div#hello'')[0]) console.log(`${event.target.tagName} is an offspring of div#hello`);
Tenga en cuenta el uso de comas entre el hijo y el padre y sus comillas separadas. Si estuvieran rodeados por las mismas citas
$(''child, parent'');
Tendría un objeto que contiene ambos objetos, independientemente de si existen en sus árboles de documentos.
Puede hacer que su código funcione simplemente cambiando los dos términos:
if ($(target).parents(''div#hello'').length) {
Tuviste al niño y a los padres por el camino equivocado.
Si solo está interesado en el padre directo, y no en otros ancestros, puede usar parent() y darle el selector, como en target.parent(''div#hello'') .
Ejemplo: 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'');
}
}
O si desea verificar si hay antepasados que coincidan, utilice .parents() .
Ejemplo: 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'');
}
}
Si tiene un elemento que no tiene un selector específico y aún desea verificar si es un descendiente de otro elemento, puede usar jQuery.contains()
jQuery.contains (contenedor, contenido)
Descripción: verifique si un elemento DOM es un descendiente de otro elemento DOM.
Puede pasar el elemento padre y el elemento que desea verificar a esa función y regresa si este último es un descendiente del primero.
Terminó usando .closest () en su lugar.
$(document).on("click", function (event) {
if($(event.target).closest(".CustomControllerMainDiv").length == 1)
alert(''element is a child of the custom controller'')
});
Vanilla 1-liner para IE8 +:
parent !== child && parent.contains(child);
Aquí, cómo funciona:
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>
.has() parece estar diseñado para este propósito. Como devuelve un objeto jQuery, también debe probar .length :
if ($(''div#hello'').has(target).length) {
alert(''Target is a child of #hello'');
}