jQuery: creare selettori personalizzati (custom)

Short link

I selettori CSS di jQuery non fanno tutti parte delle specifiche CSS. Alcuni di essi, infatti, sono selettori personalizzati (o custom). Esempi di tali selettori sono :hidden, :visible e :input. La cosa interessante è che jQuery ci consente di creare nuovi selettori personalizzati. Vediamo come.

La sintassi di base da cui partire è la seguente:


$.extend($.expr[':'], { 
  selettore: function (elemento) {
  
    // imposta un valore booleano da restituire oppure
    
    return false;
  }
});

L'espressione è costituita dal nome del selettore e da una funzione che ha come argomento l'elemento corrente e che restituisce un valore booleano indicante se la selezione ha avuto successo o meno.

Per esempio, immaginiamo di voler creare un selettore che selezioni un elemento solo se questo è effettivamente presente e visibile nella finestra del browser. Ecco come possiamo fare:


$.extend($.expr[':'], {
  inviewport: function (element) {
    var $element = $(element),
    $window = $(window),
    top = $element.offset().top,
    height = $element.outerHeight(true),
    windowTop = $window.scrollTop(),
    windowScroll = windowTop - height,
    windowHeight = windowTop + height + $window.height();
    return (top > windowScroll && top < windowHeight);
  }
});

Esempio d'uso:


$('h2:inviewport').each(function() {

	// ...

});

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.