18100 sujets

Questions générales et questions de débutants

Petit problème de sélecteur - Jquery - Niveau débutant

Hello! Mon soucis est simple, mais je n'arrive pas à trouver la solution!

Je souhaite sélectionner la 4ème 
li
de chacune de mes 
ul
. Cependant, seul la 4ème 
li
de ma première 
ul
est sélectionnée.

Une idée? Je débute et je suis dessus depuis 1h Smiley bawling 

<ul>
<li>A <a href="#">Premier</a></li>
<li>B <a href="#">Deuxième</a></li>
<li>C <a href="#">Troisième</a></li>
<li>D <a href="#">Quatrième</a></li>
</ul>

<ul>
<li>A <a href="#">Premier</a></li>
<li>B <a href="#">Deuxième</a></li>
<li>C <a href="#">Troisième</a></li>
<li>D <a href="#">Quatrième</a></li>
</ul>

<ul>
<li>A <a href="#">Premier</a></li>
<li>B <a href="#">Deuxième</a></li>
<li>C <a href="#">Troisième</a></li>
<li>D <a href="#">Quatrième</a></li>
</ul>

<ul>
<li>A <a href="#">Premier</a></li>
<li>B <a href="#">Deuxième</a></li>
<li>C <a href="#">Troisième</a></li>
<li>D <a href="#">Quatrième</a></li>
</ul>


$('ul')
	.children('li')
	.eq(3)
	.css({'color':'#9FFF7E', 'font-size':'50px'});


Moi ce que je lis : Séléctionne les UL ayant pour enfant des LI se situant en 4ème position, applique le CSS suivant. Evidemment, je me doute bien que je merde, mais je ne sais pas où Smiley sweatdrop
Je viens de trouver à l'instant! Comme quoi, la persévérance ça paye!!

$('ul')
	.children('li:last-child')
	.css({'color':'#9FFF7E', 'font-size':'50px'});


Les ul dont les enfant li sont en dernière position prendront le css qui suit!

Bonne journée Smiley langue Smiley murf Smiley langue Smiley murf Smiley langue Smiley murf Smiley langue Smiley murf Smiley langue Smiley murf Smiley biggrin
Modérateur
Salut borg80,

Content que tu aies trouvé, par contre, au passage, le but est-il seulement de rajouter ce petit bout de CSS ?

Si "non", alors bonne continuation ! Smiley lol

Si "oui" alors une chose plus "sympa" à faire est d'ajouter une classe en Js et ensuite styler les élément depuis le CSS.

Mais au delà, avec un sélecteur aussi simple, tu peux directement sélectionner ces <li> en CSS et te passer du Js (plus compliqué, plus lent, moins facile a maintenir etc...)

li:last-child {
  color:#9FFF7E;
  font-size:50px;
}
Fait exactement ce que fait ton code

Tu peux aussi sélectionner que le 4eme élément (au cas ou un jour tu en ais plus) grâce à :
li:nth-child(4) {
  color:#9FFF7E;
  font-size:50px;
}


Bonne journée !
Ou sinon, pour rester dans le jquery 

$( "ul li:nth-child(4)" ).css .....


ou encore 

$( "ul" ).each(function( index ) {
  $( this ).find( "li:eq(3)" ).css..........
});

Modifié par JENCAL (27 Apr 2016 - 14:02)
Merci @ _laurent et JENCAL!!

Non, effectivement, ce petit bout de CSS n'est qu'un prétexte pour pouvoir utiliser les sélecteurs Smiley lol .

En ce qui concerne le changement de classe d'un élément... de tête Smiley langue

$('div')
.addClass('maclasse');

Je suis content, ça commence à rentrer Smiley langue

J'ai pas encore abordé les 'this' ou encore les 'each', donc je me laisse encore un peu de temps pour ces solutions.

En tout cas, merci et bonne journée Smiley smile
Bonjour,

Un dernier pour la route :
$('li:last-child')


EDIT : bon alors deux autres pour la déconne :
$('ul li').not($('ul li').filter(':first-child, :first-of-type+li, :nth-last-child(2)'))

$('ul li').not($('ul li').filter(':first-child, :nth-last-child(2)').next(':not(:last-child)').addBack()) //  \o/

(et j'en suis fier, hein ! Smiley biggol )
Modifié par SolidSnake (27 Apr 2016 - 19:08)
Sujet clos
Aller à