Expression du sélecteur enfant de jQuery

Question

<div id="div">
    <div> <!-- first level -->
        <div> <!-- second level -->
            <div>1.1</div> <!-- third level -->
            <div>1.2</div>
        </div>
        <div>
            <div></div>
            <div>2.2</div>
        </div>
    </div>
</div>

Quels sont les Expressions de sélecteurs jQuery pour avoir sélectionné les suivants :
1. div commenté par premier niveau
2. divs commentés par deuxième niveau
3. divs commentés par troisième niveau

Answer 1

Utilisez le sélecteur d'enfant immédiat > dans ce cas :

• Premier niveau :
  • $("#div > div")
  • $("#div > *") (version générique)
• Deuxième niveau :
  • $("#div > div > div")
  • $("#div > * > *") (version générique)
• Troisième niveau :
  • $("#div > div > div > div")
  • $("#div > * > * > *") (version générique)

Le générique équivalent est .children() sans sélecteur également, par exemple :

$("#div").children()
$("#div").children().children()
$("#div").children().children().children()

Answer 2

La clé de tout cela est soit le > (enfant) ou le sélecteur children() méthode.

Premier niveau :

$("#div > div")...
$("#div").children("div")...

Deuxième niveau :

$("#div > div > div")...
$("#div").children("div").children("div")...

Troisième niveau :

$("#div > div > div > div")...
$("#div").children("div").children("div").children("div")...

Si vous n'êtes pas intéressé par une balise particulière (par exemple div), il suffit de ne pas spécifier de sélecteur à children() . Par exemple, tous les éléments de second niveau :

$("#div").children().children()...

Answer 3

Exactement la même chose que les sélecteurs CSS pour eux.

Modifié pour vos nouvelles exigences :

#div > *
#div > * > *
#div > * > * > *

Answer 4

1. $('#div > *') - Cela sélectionnera toutes les étiquettes qui sont un descendant direct de l'élément. #div . Sans utiliser le sélecteur d'enfant > vous obtiendrez toutes les balises de l'élément #div, et pas seulement le premier niveau.

2. $('#div > * > *') - Même idée que le n°1

3. $('#div > * > * > *')

Answer 5

Ils sont vrais mais pour sélectionner spécifiquement vos premiers articles, utilisez ceci ;

first level : $("#div").children("div:first-child")

Second level: $("#div:first-child").children("div:first-child").children("div:first-child")

Third level: $("#div").children("div":first-child).children("div:first-child").children("div:first-child")