web-dev-qa-db-fra.com

jquery: enfants () vs sélecteur d'enfants ">"

J'ai une table qui a une section semblable à la suivante:

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

mon $ (this) est défini sur l'élément tr et j'essaie d'accéder aux éléments Span dont la classe "myclass" est définie . Ce qui suit semble fonctionner:

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

mais en essayant d'utiliser ceci:

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

ou ca:

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

Ce ne est pas. Je pensais que l’un ou l’autre des 2 ci-dessus aboutirait à des résultats similaires (mais par des méthodes différentes) mais apparemment pas.

Qu'est-ce que j'oublie ici?

Merci!

jqueryjquery-selectorschildren
18
user417918

children(selector) ne fera correspondre que les enfants qui correspondent à selector. Aucun des enfants de tr (le tds) ne peut correspondre à td > span, car tr n'a aucun élément enfant span, seulement tds et td > span !== td.

La documentation est également très claire à ce sujet:

Obtenez les enfants de chaque élément dans l'ensemble d'éléments correspondants, éventuellement filtrés par un sélecteur.

Au lieu de cela, vous voudrez peut-être .find() :

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

Il retourne tous les descendants, pas seulement les enfants, qui correspondent au sélecteur. 

19
Felix Kling

À partir de la documentation jQuery:

"Les méthodes .find () et .children () sont similaires, sauf que ces dernières ne parcourent qu'un seul niveau dans l'arborescence DOM."

Je recommanderais d'utiliser ceci:

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

À votre santé

1
Kevin Ennis

Je l'ai expliqué ici .

La différence est que le premier sélecteur est entièrement dans l'appel children, alors que le second ne l'est pas.

Par conséquent, le premier recherche tous les enfants de this qui correspondent également à td > span. (En d'autres termes, tous les enfants {<span>s de <td>s } (le sélecteur) qui sont eux-mêmes directement des enfants de this.

Le second trouvera tous les <td> enfants de this, puis tous les <span>s dans ces <td>s.

0
SLaks