Guide to JavaScript’s filter() Method sur StackAbuse
Guide to JavaScript’s filter() Method – Version PDF. Une multitude d’exemples d’utilisation particulièrement utiles de la méthode Filter.
Étiquette : filter
[Javascript] Filtrer les éléments d’un tableau et stopper à la première occurrence qui matche
ECMAScript:
Sources: JavaScript filter that stops at the first result et Array.prototype.find().
|
1 2 3 4 5 6 7 8 |
var array1 = [5, 12, 8, 130, 44]; var found = array1.find(function(element) { return element > 10; }); console.log(found); // expected output: 12 |
Javascript:
Source: How to Search Arrays in JavaScript: Searching Arrays Using for Loops.
|
1 2 3 4 5 6 7 8 9 10 |
function findInArray(ar, val) { for (var i = 0,len = ar.length; i < len; i++) { if ( ar[i] > val ) { // first val > leftStackOuterHeight return i; } } return -1; } var firstMatchingElement = findInArray(output, leftStackOuterHeight); |
[jQuery] Sélectionner les x derniers éléments ayant une classe spécifique avec les méthodes Filter et Slice
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; } |
[jQuery] Vérifier que la valeur d’un attribut contient un élément d’une liste consignée dans une variable avec Filter, Map et Split.
- Définir une liste des formats de fichiers.
- Si l’attribut ‘title’ de ‘a.link’ contient l’un des formats de fichiers contenus dans la variable ci-dessus, alors ajouter une boprdure autour du lien.
|
1 2 3 4 5 6 7 |
var FILE_FORMAT_LIST = ["PDF","XLSX","TXT"]; jQuery('a.link[title]').each(function(){ jQuery(this).filter(jQuery.map(FILE_FORMAT_LIST, function (val) { return ':contains("' + val + '")'; }).join()).css('border','1px solid red'); }); |