Source : Démo jsFiddle.net.
L’intérêt d’utiliser les méthodes .filter() ou .slice() réside dans le fait qu’elles sont totalement indépendantes des concepts HTML et CSS d’imbrication ou d’héritage parents > enfants.
En effet, si on utilisait les pseudo-sélecteurs :nth-child ou :nth-of-type, on ciblerait les deux derniers <li> de chaque <ul>.Or ce que nous recherchons ici, c’est cibler les 2 derniers éléments de .container qui possèdent la classe .list-item. Et ce peu importe leur place dans l’arbre généalogique du container.
![[jQuery] Sélectionner les x derniers éléments ayant une classe spécifique avec les méthodes Filter et Slice](http://devfrontend.info/wp-content/uploads/2016/02/filter-slice.png)
[jQuery] Sélectionner les x derniers éléments ayant une classe spécifique avec les méthodes Filter et Slice
|
|
(function(){ var listItems = $('.container .list-item'); // cibler les 2 derniers avec la méthode .filter() var getItemsCount = listItems.length; var getLastTwo = [getItemsCount - 1, getItemsCount - 2]; listItems.filter(function(index, el){ return $.inArray(index, getLastTwo) > -1; }).addClass('last-two'); // cibler du 5ème au 9ème avec la méthode .slice() listItems.slice(5, 9).addClass('five-to-nine'); })(); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div class="container"> <ul class="list"> <li class="list-item">list item</li> <li class="list-item">list item</li> <li class="list-item">list item</li> <li class="list-item">list item</li> </ul> <ul class="list"> <li class="list-item">list item</li> <li class="list-item">list item</li> <li class="list-item">list item</li> <li class="list-item">list item</li> </ul> <ul class="list"> <li class="list-item">list item</li> <li class="list-item">list item</li> <li class="list-item">list item</li> <li class="list-item">list item</li> </ul> <ul class="list"> <li class="list-item">list item</li> <li class="list-item">list item</li> <li class="list-item">list item</li> <li class="list-item">list item</li> </ul> <ul class="list"> <li class="list-item">list item</li> </ul> </div> |
|
|
.last-two{ border: 1px solid tomato; } .five-to-nine{ background: pink; } |