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

<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ù

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

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 !

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 .

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

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

Je suis content, ça commence à rentrer

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

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 ! )
Modifié par SolidSnake (27 Apr 2016 - 19:08)