Quelle est la différence entre l'espace de jQuery et > sélecteurs?

Question

Quelle est la différence entre le espace et > sélecteurs? Et éventuellement lié, comment puis-je rechercher quelque chose qui est l'enfant direct de quelque chose d'autre, et pas plus bas que la ligne descendante?

Answer 1

Pour:

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

Par exemple

$("ul > li").addClass("blah");

ajoute la classe & bl; & blah " à 1 2 et 3 alors que:

$("ul li").addClass("blah");

add class " blah " à chaque élément de la liste.

Je ne suis pas sûr de savoir de quoi vous parlez avec < et ? opérateurs.

Answer 2

En CSS, > signifie "enfant direct de": seuls les nœuds qui sont des enfants directs sont sélectionnés.

Alors qu'un espace signifie "tout descendant de": les enfants directs et les enfants de ces enfants peuvent être sélectionnés.

Je parierais que jQuery utilise la même convention.

Answer 3

Comme déjà mentionné, un espace sélectionnera tout descendant, alors que > ne sélectionnera que les enfants immédiats. Si vous souhaitez sélectionner uniquement les petits-enfants ou les arrière-petits-enfants, vous pouvez utiliser ceci:

#foo > * > * > .bar

(tous les éléments avec la classe "bar" qui sont des arrière petits-enfants de l'élément avec l'id "foo")

Answer 4

regarde ça ..

$(".testit > a") //match the first <a> tag below
$(".testit a") // matches all <a> tag below

<p class="testit">
  <a href="#">All the rules will match this</a>
  <span>
    <a href="#">second rule can only select this</a>
  </span>
</p>