Le bloc-notes professionnel d'un développeur front-end senior
Source: Directive template unique IDs for elements in AngularJS
|
1 2 3 4 |
<div class="myDirective"> <input type="checkbox" id="myItem_{{$id}}" /> <label for="myItem_{{$id}}">open myItem_{{$id}}</label> </div> |
Source: ngRepeat dans la documentation officielle d’Angular JS
Pas tenté: mais peut probablement être utilisé également avec l’attribut HTML colspan.
Il suffit d’ajouter un attribut ng-hide="$index>0" sur l’ensemble des cellules du tableau qui contiennent l’attribut rowspan.
Source jsfiddle.net: AngularJS: ngRepeat & rowspan.
|
1 2 3 4 5 6 |
<tbody ng-repeat="group in groups"> <tr ng-repeat="member in group.members"> <td rowspan="{{group.members.length}}" ng-hide="$index>0"> </td> </tr> </tbody> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
(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> |
|
1 2 3 4 5 6 |
.last-two{ border: 1px solid tomato; } .five-to-nine{ background: pink; } |