jQuery; Comprueba si el objeto tiene child $ (this)

Question

Me pregunto cómo de la mejor manera puedo ver si un contenedor div contiene un elemento secundario. Tengo un evento de clic que se activa en un elemento secundario de cualquier div id = no leído o div id = read. Quiero verificar dónde está este niño.

Algo como esto es lo que estoy pensando:

if ($("#unread").find($(this))) 
    alert("unread"); 
else 
    alert("read"); 

Editar: $ (este) es una descendencia de dos niveles #unread o #read.

que respecta al uso

Answer 1

Marca de: .children()

if($("#unread").children().length > 0) 
    alert("unread"); 
else 
    alert("read"); 

EDITAR

if($(event.target).closest('#unread').length > 0) 
    alert('unread'); 
else 
    alert('read'); 

Answer 2

Creo que sólo añadir .length debería funcionar:

if ($("#unread").find($(this)).length > 0) 
    alert("unread"); 
else 
    alert("read"); 

Answer 3

Ir backwa RDS de $(this) para buscar #unread como un antepasado usando closest:

if($(this).closest('#unread').length > 0) 
    alert('unread'); 
else 
    alert('read'); 

Dependiendo de su estructura HTML, esto será más rápido que buscar todos los hijos de #unread encontrar this. Sin embargo, la diferencia de velocidad probablemente no importará mucho, pero debes tener en cuenta la opción de retroceder y los posibles beneficios de hacerlo.

La comprobación del antecesor podría ser una mejor opción para su intención también: tiene this en la mano y lo que realmente quiere saber es "¿está dentro de #unread?". Usar closest para volver al árbol DOM coincide exactamente con la pregunta que está haciendo.

Si por alguna razón usted está empeñado en a partir de las #unread y mirando a sus descendientes, a continuación, puede utilizar find:

if($('#unread').find(this)) 
    alert('unread'); 
else 
    alert('read'); 

Pero este enfoque sólo funcionará si está utilizando al menos jQuery 1.6.

Answer 4

Uso .closest() o .parents() a buscar el árbol del elemento hecho clic:

if ($(this).closest("#unread").length == 1) 
    // etc 

De lo contrario, ¿está usted interesado en un jQuery no contesta? Teniendo en cuenta que usted ha dicho el div con el evento de clic es exactamente dos niveles por debajo de los "leer" o "no leídos" divs que sólo podría hacer esto:

if (this.parentNode.parentNode.id === "unread") 
    alert("unread"); 
else 
    alert("read"); 

// or just alert(this.parentNode.parentNode.id); 

Answer 5

Me pregunto cómo de la mejor manera puede ver si un contenedor div contiene un elemento secundario.

Utilice $.contains(), especialmente si el rendimiento es una preocupación. De los documentos:

jQuery.contiene (contenedor, contenido)

devoluciones: Boolean

Descripción:Compruebe si un elemento DOM es un descendiente de otro elemento DOM.

es más eficiente que .find(), .children(), o .closest(), como otros han recomendado. Tenga en cuenta, sin embargo, que solo acepta los elementos DOM como parámetros, no los objetos jQuery (que es parte de por qué su rendimiento es mejor).

En su caso, se puede hacer esto en su controlador de eventos click:

if ($.contains($("#unread")[0], this)) { 
    alert("unread"); 
} else { 
    alert("read"); 
} 

EDIT: Al pensar en esto de nuevo, es probable que sea más intuitivo para buscar hacia arriba desde el elemento se ha hecho clic, en lugar de hacia abajo desde el elemento padre, y el rendimiento normalmente no sería una preocupación en un controlador de eventos click. Es decir, me gustaría optar por usar el método .closest() (según lo sugerido por @nnnnnn y @mu es demasiado corta), por lo que mi controlador de eventos click contendría:

if ($(this).closest("#unread").length > 0) { 
    alert("unread"); 
} else { 
    alert("read"); 
}