JQuery sélecteur

Question

Compte tenu de la liste non ordonnée suivant, le sélecteur JQuery $("#root #2") sélectionne:

/ul/li/ul[@id='root']/li/ul[@id='1']/li/ul[@id='2'] 

Alors que je me serais attendu à choisir le chemin plus court:

/ul/li/ul[@id='root']/li/ul[@id='2'] 

Quelqu'un des idées?

<ul> 
    <li>root 
     <ul id="root"> 
      <li>1 
       <ul id="1"> 
        <li>2 
         <ul id="2"> <!--*selecting this*--> 
          <li>3<ul id="3"></ul></li>   
          <li>4<ul id="4"></ul></li> 
         </ul> 
        </li> 
        <li>3<ul id="3"></ul></li> 
       </ul> 
      <li>2 
       <ul id="2"> <!-- *expecting this* -->     
        <li>3 
         <ul id="3"> 
          <li>4<ul id="4"></ul></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li>3<ul id="3"></ul></li> 
      <li>4<ul id="4"></ul></li> 
     </ul> 
    </li> 
</ul> 

Answer 1

Deux raisons pour lesquelles le comportement pourrait être indéfini/pas ce que vous attendez:

1. ID devraient être unique, et le chemin que vous recevez précède le chemin que vous voulez dans la source.
2. ID (moins probable dans cette situation) sont expected to begin with a letter

Answer 2

L'utilisation d'un espace dans un sélecteur sélectionne tout ancêtre. Mon intuition est que puisque li avec id = 2 vient avant le ul avec id = 2 dans le DOM, jQuery s'arrête à cela (puisque les identifiants devraient être uniques). J'espère que ce n'est pas du vrai HTML ... car les id devraient vraiment être uniques.

Answer 3

Vous utilisez un opérateur descendant, qui recherchera tous les descendants. J'imagine que jQuery utilise l'algorithme de recherche de profondeur en premier dans la recherche de l'arbre DOM. Cela explique pourquoi vous obtenez le plus long d'abord. En ce qui concerne les raisons pour lesquelles jQuery ne renvoie qu'un seul noeud, vous utilisez un sélecteur d'ID, qui est censé être unique dans tous les noeuds DOM. Je m'attendrais à ce que jQuery revienne après le premier match, car il ne sert à rien de traverser le reste de l'arbre.

Answer 4

Ce sélecteur doit renvoyer tout élément avec un ID de 2 qui est un descendant de tout élément avec un ID de racine, dans l'ordre DOM. Je m'attends à ce qu'il renvoie les deux éléments que vous avez mentionnés dans votre question. Le plus profond sera le premier car c'est le premier dans le document.

Notez que les ID doivent être uniques. C'est une erreur d'avoir deux éléments avec un ID de 2.