jQuery ile döküman uzantısına göre class ekleme

Öncelikle sayfamızın üst kısmında head etiketi içerisinde jQuery kütüphanemizi ekleyelim:

<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>

<a href="http://www.anarsamadov.net/deneme.doc">DOC deneme</a>
<a href="http://www.anarsamadov.net/deneme.xls">XLS deneme</a>
<a href="http://www.anarsamadov.net/deneme.pdf">PDF deneme</a>

Döküman uzantılarına göre sınıflar oluşturarak biçimlendirelim ve arka fon resmi olarak da ilgili ikonlarını sağa doğru hizalayalım:

.doc {background-color:#EEE; color:#333; margin:5px 10px; background-image:url('http://www.anarsamadov.net/icons/doc.png'); background-repeat:no-repeat; background-position:right; padding-right:30px;}

.xls {background-color:#EEE; color:#333; margin:5px 10px; background-image:url('http://www.anarsamadov.net/icons/xls.png'); background-repeat:no-repeat; background-position:right; padding-right:30px;}

.pdf {background-color:#EEE; color:#333; margin:5px 10px; background-image:url('http://www.anarsamadov.net/icons/pdf.png'); background-repeat:no-repeat; background-position:right; padding-right:30px;}

<script type='text/javascript'>
$(window).load(function(){
$('a[href]').each(function() {
   if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
       $(this).addClass(C[1]);
   }
});}); 
</script>

Örnek Uygulama

Kaynak:

Automatically Discover Document Links And Apply Class