Jquery: applicare automaticamente classi diverse ai link

Molto spesso le scelte di usabilità e design portano a differenziare gli stili con cui vengon presentati i collegamenti a seconda di dove puntano.

Ad esempio se a un pdf il link apparirà diverso piuttosto che a un file word o un file excel etc etc.

Con Jquery possiamo evitare di applicare manualmente una classe diversa per ogni tipo di link: sarà sufficiente nel nostro foglio stile definire le caratteristiche delle classi necessarie, nominandole secondo le estensioni dei file da individuare e differenziare.

Ad esempio

.doc {
    color: red;
    text-decoration: none;
}

.pdf {
    color: blue;
    text-decoration: none;
}

e così via.

Dopo aver definito le regole CSS carichiamo l'ultima versione di Jquery, (qui l'articolo),e aggiugngiamo lo script, questo

$(document).ready(function() {
$('a[href]').each(function() {
   if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
       $(this).addClass(C[1]);
   }
});
});  

Naturalmente possiamo aggiungere tutte le estensioni che ci interessano!