jQuery fornisce il metodo filter() per filtrare gli elementi del DOM in base a certi criteri stabiliti in una funzione di callback. Volendo fare a meno di jQuery, possiamo implementare lo stesso metodo con risultati del tutto analoghi. Vediamo come.
Definiamo la seguente funzione:
function filter(test, array) {
var result = [], len = array.length;
for (var i = 0; i < len; i++) {
var current = array[i];
if (test(current)) {
result.push(current);
}
}
return result;
}
La funzione filter() usa due parametri: il primo è la funzione di callback usata per filtrare l'array e il secondo è l'array su cui operare. Il filtraggio avviene comparando il risultato booleano restituito dalla funzione di callback con il valore corrente dell'array.
Per esempio, data la seguente struttura HTML:
<ul id="test">
<li>1</li>
<li>a</li>
<li>2</li>
<li>b</li>
<li>3</li>
<li>c</li>
</ul>
Vogliamo ottenere solo quelle voci di lista il cui contenuto testuale inizia con un numero. Ecco come fare:
function testValue(element) {
return /^\d/.test(element.firstChild.nodeValue);
}
window.onload = function() {
var elems = document.getElementById('test').getElementsByTagName('li');
var filtered = filter(testValue, elems);
for(var j = 0; j < filtered.length; j++) {
console.log(filtered[j].firstChild.nodeValue);
}
};
L'output nella console sarà il seguente:
1 2 3
Abbiamo eseguito il nostro test di verifica sulla proprietà nodeValue di ciascun elemento della lista. Si noti come la funzione testValue() restituisca un valore booleano. Questa condizione è necessaria affinchè l'operazione vada a buon fine.