jquery: niños() vs selector de hijo ">"

Question

Tengo una tabla que tiene una sección similar a los siguientes:

<tr> 
    <td> <span class="myclass"></span> 
    </td> 
<tr> 

mis $ (este) se establece en el elemento tr y estoy tratando para acceder a los elementos Span que tienen el conjunto de clases "myclass". La siguiente parece funcionar:

if ($(this).children('td').children('span').is('.myclass')){ 
    alert('in here'); 
} 

pero al intentar utilizar este:

if ($(this).children("td > span").is('.myclass')){ 

o esto:

if ($(this).children("td span").is('.myclass')){ 

no lo hace. Pensé que cualquiera de los dos anteriores presentaría resultados similares (aunque a través de diferentes métodos) pero aparentemente no.

¿Qué me falta aquí?

Gracias!

Answer 1

children(selector) solo coincidirá con los elementos que coinciden con selector. Ninguno de los hijos de tr (td s) puede coincidir con td > span, ya que tr no tiene span elementos secundarios, solo td sy td > span !== td.

El documentation es también bastante claro:

conseguir que los niños de cada elemento en el conjunto de elementos emparejados, opcionalmente filtrados por un selector.

---

Lo que es posible que desee lugar es .find():

$(this).find("td > span") 

Devuelve todos los descendientes , no sólo los niños, que coinciden con el selector.

Answer 2

Lo he explicado here.

La diferencia es que el primer selector está completamente dentro de la llamada children, mientras que el segundo no lo está.

Por lo tanto, el primero busca a todos los niños de this que también coincidan con td > span. (En otras palabras, todos los {<span> s hijos de <td> s } (selector) que son a su vez directamente a los niños de this)

El segundo uno encontrará todos <td> hijos de this, a continuación encontrará toda la <span> s en aquellos <td> s.

Answer 3

De la documentación de jQuery:

"El .find() y.niños() métodos son similares, excepto que este último sólo se desplaza un solo nivel hacia abajo el árbol DOM "

le recomiendo usar esto:.

if ($(this).find('.myclass').length){ 
    alert('in here'); 
} 

Saludos