Magazine Internet

Introduction au sélecteur :last et :first de jQuery

Publié le 23 avril 2009 par Dave Lizotte
Lorsque vous débutez avec jQuery, vous voyez une multitude de notions. Parmi l'une d'elles, les Sélecteurs. Nous allons donc voir ici, l'utilité des sélecteurs :first et :last. On utilise souvent ce sélecteur lorsque vous créez un contenu qui se répète telle une liste par exemple et que vous désirez mettre en évidence, le premier ainsi que le dernier élément de cette liste. Voyons donc ici comment affecté un style à au premier et le dernier élément d'une liste <ul>.

HTML

<ul class="column col3"> 
<li>
<div class="block">
<h2>:first</h2>
<p>Odio velit vulpes zelus elit euismod. Feugiat ille, indoles, turpis tincidunt, ea iriure capto esse nostrud paratus populus vulputate. </p>
</div>
</li>
<li>
<div class="block">
<h2>Colonne 2</h2>
<p>Odio velit vulpes zelus elit euismod. Feugiat ille, indoles, turpis tincidunt, ea iriure capto esse nostrud paratus populus vulputate. </p>
</div>
</li>
<li>
<div class="block">
<h2>:last</h2>
<p>Odio velit vulpes zelus elit euismod. Feugiat ille, indoles, turpis tincidunt, ea iriure capto esse nostrud paratus populus vulputate. </p>
</div>
</li>
</ul>

jQuery

// Ajout d'une classe au CSS, au premier et dernier élément de la liste
$("ul.column li .block:first").addClass("first"); // Ajout de la classe au 1er élément
$("ul.column li .block:last").addClass("last"); // Ajout de la classe au 2eme élément

CSS

.first {background: #ffdbdb;}
.last {
margin-right: 0;
background: #c4dcff;
}


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Dave Lizotte 57 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog