sélecteurs jQuery pas ce que je pensais

Question

En utilisant jQuery 1.4.2 (IE8 en mode de compatibilité)

Compte tenu de la structure suivante:

<div id='something'>something</div> 
<div id='parental'> 
    <div><p>hi there</p> goats</div> 
    <p>hello again</p> 
</div> 
<div> end of the line</div> 

et ce code:

var Fred= $('#parental'); 
$('div').css({color: 'blue'}); 
Fred.children('div').css({color: 'red'}); 
Fred.children('div').children('p').css({color:'green',border:'solid red 2px'}); 
Fred.children('div p').css({color: 'orange'}); 
Fred.children('div>p').css({border:'solid #FFFF00 2px'}); 

• " quelque chose "et" la fin de la ligne "sont bleus comme je l'attendrais
• " chèvres "est un rouge Je m'y attendrais.
• "hi there" est vert avec bordure rouge (je m'attendais à ce qu'il soit orange/jaune)
• "hello again" est orange avec une bordure jaune (pas ce à quoi je m'attendais).

Pourquoi le sélecteur Fred.children('div p') et la Fred.children('div').children('p') et Fred.children('div>p') pas sélectionner la même chose?

voir en action ici: http://jsfiddle.net/bxAzN/

Answer 1

Parce .children() effectue les opérations suivantes:

Obtenir les enfants de chaque élément de l'ensemble d'éléments adaptés, éventuellement filtrés par un sélecteur.

Maintenant, prenez div p. Les seuls enfants de #parental sont un div et un élément p. .children('div p') ne correspond qu'à l'élément p car il a un div comme ancêtre (#parental lui-même). Mais l'enfant div ne correspond pas clairement à ce sélecteur.
Vous devriez penser à children() comme tous les enfants filtrés par ce sélecteur qui est différent de tous les descendants obtenir qui correspondent à ce sélecteur. Pour cela, vous devrez utiliser find().

Fred.children('div').children('p') contrairement avoir pris toutes les div enfants de Fred et sélectionne alors tous les p enfants de div. Children() est l'équivalent de faire ">" dans le sélecteur

Answer 2

essayez de changer enfants à trouver

var Fred= $('#parental'); 
$('div').css({ 
    color: 'blue' 
}); 
Fred.children('div').css({ 
    color: 'red' 
}); 
Fred.find('div').find('p').css({ 
    color: 'green',border:'solid red 2px' 
}); 
Fred.find('div p').css({ 
    color: 'orange'}); 

Fred.find('div>p').css({ 
    border:'solid #FFFF00 2px' 
});​ 

sa sélection même "salut là"

http://jsfiddle.net/bxAzN/2/

Les enfants ne regards à l'enfant immédiat n du nœud, tandis que find traverse le DOM entier en dessous du nœud, ainsi les enfants seront plus rapides. La méthode à utiliser dépend si vous voulez seulement considérer les descendants immédiats ou tous les nœuds inférieurs à celui-ci dans le DOM. -tvanfosson

Les enfants et find ne donneront pas forcément le même résultat: find() vous donnera n'importe quel noeud descendant, alors que children() ne vous donnera que des enfants immédiats qui correspondent.

Ainsi, trouver() sera plus lent car il doit rechercher chaque nœud descendant qui pourrait correspondre, et pas seulement les enfants immédiats. -Jean Feminella

Answer 3

site jquery dit ...

ne se déplace un seul niveau sur le arbre DOM

donc en utilisant children('div p') ne fonctionnera pas parce que vous essayez de regarder vers le bas deux étapes l'arbre DOM. En utilisant children('div>p') fonctionne parce que c'est effectivement 1 sélecteur, même si je me rends compte pourquoi c'est déroutant.

Si vous voulez qu'une fonction fasse ce que vous essayez de faire, vous devez regarder find().