jQueryでAタグのURLに拡張子.pdfがあったら自動でPDFアイコンを付ける

横にPDFアイコンが付いたリンクタグを見かけますが、あれをCSSの属性セレクタで拡張子.pdfへのリンクの場合は自動でアイコンを付けるって技が有ります。

こんなの

知ったかぶってますが、現在やっている案件のデザイナーさんから教えて頂きました。

CSS

a[href $='.pdf'] {
	background-repeat: no-repeat;
	background-image: url(pdf.gif);
	padding-left:45px;
	padding-top:8px;
	padding-bottom:8px;
}

便利だなぁと思ったのですが、コードを見てIE下位バージョンで使えるのかな？と思い、確認して見ると表示出来ないようで・・・さすがにそろそろIE8以上くらいで考えたいのですが、せっかくなのでjQuery使ってIE6でも表示出来る方法を考えてみました。

こんなの

jQuery

jQuery(document).ready( function() {
  var tag = jQuery("body a");
  
  tag.each(function(){
    var href = jQuery(this).attr('href');
    if (href != null ) {
      href = href.replace(/#/g,'');
      if (href.match(/.pdf/i) ) {
        jQuery(this).addClass("href_pdf");
      }
    }
  });
});

CSS

.href_pdf{
	background-repeat: no-repeat;
	background-image: url(pdf.gif);
	padding-left:45px;
	padding-top:8px;
	padding-bottom:8px;
}

jQueryでBODY内のAタグを取り出し、.pdfという文字列があったらクラスを当てるってものです。エクセルとかワードとか作っておけば便利っすね。