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

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

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

こんなの

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

CSS

SyntaxHighlighterについて
1
2
3
4
5
6
7
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

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
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

SyntaxHighlighterについて
1
2
3
4
5
6
7
.href_pdf{
    background-repeat: no-repeat;
    background-image: url(pdf.gif);
    padding-left:45px;
    padding-top:8px;
    padding-bottom:8px;
}

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