Je dois créer un tableau de premiers éléments Li, mais je ne sais pas comment faire cela.
Mon HTML ressemble à ceci: P>
const allVisibleElements = document.querySelectorAll('');
5 Réponses :
Vous devez cibler le li qui sont des enfants du ul qui est l'enfant de .nav , vous devez donc utiliser le combinaison enfant > :
C'est ce qu'on appelle le Combinateur enfant , pas le "Sélecteur d'enfants immédiate ". Les enfants sont, par définition, immédiat (par opposition à des descendants qui incluent des enfants, des petits-enfants, des arrière-petits-enfants, etc.)
droite, mise à jour. merci (je n'ai pas rappelé le bon terme)
Vous pouvez le faire en référençant les éléments d'enfant directe avec Combinateur enfant p> > code>:
<div class="nav">
<ul>
<li>Element 1</li>
<li>Element 2
<ul>
<li>Element 2.1</li>
<li>Element 2.2</li>
<li>Element 2.3</li>
<li>Element 2.4</li>
</ul>
</li>
<li>Element 3</li>
<li>Element 4
<ul>
<li>Element 4.1</li>
<li>Element 4.2</li>
<li>Element 4.3</li>
<li>Element 4.4</li>
</ul>
</li>
</ul>
</div>
Il suffit de le regarder à partir de la section Outils de Dev de Chrome en cliquant avec droit à l'élément que vous souhaitez copier son chemin JS. D'autres réponses sont viables aussi mais le moyen le plus simple d'obtenir le chemin JS d'un élément DOM est-ce.
p> document.queryselectorallall code> Accepte les sélecteurs CSS afin que vous puissiez écrire une utilisation .nav> ul> li code>.
<div class="nav">
<ul>
<li>Element 1</li>
<li>Element 2
<ul>
<li>Element 2.1</li>
<li>Element 2.2</li>
<li>Element 2.3</li>
<li>Element 2.4</li>
</ul>
</li>
<li>Element 3</li>
<li>Element 4
<ul>
<li>Element 4.1</li>
<li>Element 4.2</li>
<li>Element 4.3</li>
<li>Element 4.4</li>
</ul>
</li>
</ul>
Veuillez essayer:
$( ".nav li:nth-child(1)" ).text();
Votre besoin exact est d'obtenir l'élément 1, l'élément 2, l'élément 3, l'élément 4 seul, vous pouvez donc utiliser comme celui-ci Codepen.io/maniraj_murugan/pen/qbdmkba