jQuery: i filtri not() e filter()

I filtri jQuery not() e filter() hanno identico scopo ma funzionalità e modalità diverse. Entrambi infatti escludono uno o più elementi dal set restituito dalla selezione di jQuery, ma il primo utilizza i selettori mentre il secondo sfrutta una funzione di callback. Vediamone insieme i dettagli.

Partiamo dalla seguente struttura:

<ul id="test">
	<li class="a1">A</li>
	<li class="b">B</li>
	<li class="c">C</li>
	<li class="d1">D</li>
	<li>E</li>
	<li>F</li>
	<li>G</li>
</ul>

Definiamo per prima cosa una funzione helper per visualizzare i risultati nella console:

function print(element) {

	var output = (element.attr('class')) ? element[0].tagName.toLowerCase() + ' [' + element.attr('class') + ']' : 
	             element[0].tagName.toLowerCase() + ' - ' + element[0].firstChild.nodeValue;
	console.log(output);

}

Diciamo che vogliamo selezionare solo gli elementi privi di una classe CSS. Possiamo in questo caso usare not():

var ul = document.getElementById('test');

var $nots = $('li', ul).not('[class]');
	
$nots.each(function() {
	
	print($(this)); // li - E, li - F, li - G
	
});

In pratica not() valuta i selettori passatigli come argomento e esclude dal nuovo set tutti quegli elementi che corrispondono a tali selettori. In questo caso usando un selettore di attributo abbiamo detto all'engine di jQuery di escludere quegli elementi aventi una classe CSS.

Ora vogliamo invece selezionare solo gli elementi la cui classe CSS termina con un numero. Qui possiamo usare filter():

var $filtered = $('li', ul).filter(function() {
					   return /\d$/.test($(this).attr('class'));
				});
					
$filtered.each(function() {
    
    print($(this)); // li [a1], li [d1]
    
});

In pratica filter() valuta l'espressione restituita dalla funzione di callback (return è obbligatorio) e la compara con gli elementi del set per operare la selezione. Tutti quegli elementi che soddisfano l'espressione vengono inclusi nel nuovo set (e gli altri esclusi).

Altro esempio: vogliamo selezionare solo quegli elementi la cui classe CSS è composta da una sola lettera:

var $filtered2 = $('li', ul).filter(function() {
    				  
    				  if($(this).attr('class')) {
    				  
    				   return $(this).attr('class').length == 1;
    				   
    				 }
    		    });
    				 
$filtered2.each(function() {
    
    print($(this)); // li [b], li [c]
    
});

L'unico accorgimento preso in questo caso è quello di verificare che gli elementi abbiano effettivamente una classe CSS onde evitare valori undefined. Per il resto il procedimento è lo stesso di quello visto in precedenza.