Come possiamo filtrare le classi CSS con jQuery? Per esempio potremmo volere escludere tutte le classi da un elemento ad eccezione di una. Vediamo insieme la risposta a questa domanda.
Possiamo creare un plugin che, dato il nome di una classe, rimuove tutte le altre classi e lascia solo quella desiderata:
(function($) {
$.fn.excludeClass = function($class) {
var that = this;
var element = that[0];
var cls = element.className;
var parts = cls.split(' ');
for (var i = 0; i < parts.length; i++) {
var part = parts[i];
if (part != $class) {
element.className = element.className.replace(part, '');
}
}
return that;
}
})(jQuery);
Abbiamo usato className perchè è il modo più veloce per avere tutte le classi in una sola stringa. Ecco un esempio pratico che lascia sull'elemento la sola classe test:
$('#test').click(function() {
$(this).excludeClass('test');
});
Potete visionare l'esempio finale in questa pagina.