jQueryを使用して型ファイルを調べる方法

Question

ここではインターネット上にこのようなスクリプトが見つかりましたかどうかはわかりませんか？私はエラーを与えないが、

jQ('.b_article-full a').each(function() { 
 
  if(/.*\.pdf/.test(jQ(this).attr('href'))) { 
 
    jQ(this).before('<i class="b_icons pdf"></i> '); 
 
  } 
 
  if(/.*\.zip/.test(jQ(this).attr('href'))) { 
 
    jQ(this).before('<i class="b_icons zip"></i> '); 
 
  } 
 
  if(/.*\.doc/.test(jQ(this).attr('href'))) { 
 
    jQ(this).before('<i class="b_icons doc"></i> '); 
 
  } 
 
  if(/.*\.docx/.test(jQ(this).attr('href'))) { 
 
    jQ(this).before('<i class="b_icons doc"></i> '); 
 
  } 
 
});

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores ea pariatur accusantium sit, alias dicta repellat vitae ad ratione numquam.<a href="example.pdf"> Distinctio sapiente unde, at eligendi placeat exercitationem eius eveniet sed?</a>.</p>

Answer 1

<p class="b_article-full">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores ea pariatur accusantium sit, alias dicta repellat vitae ad ratione numquam.<a href="example.pdf"> Distinctio sapiente unde, at eligendi placeat exercitationem eius eveniet sed?</a>.</p> 

を働いていない配列$にJQを変更するときは、実行するために、あなたのコードをp要素に適用されるクラスを逃しました。

Answer 2

まず、あなたの例ではjQがjQueryのエイリアスであるように見えます。妨害する他のライブラリがない限り、代わりに$変数を使用することができます。

a要素を見つけるためにセレクタを修正する必要があります。あなたの例では、b_article-fullのクラスを含む要素を追加する必要があります。以下のサンプルでは、​​これをpに載せました。

また、switchステートメントは、if条件のリストよりも適切であるように見えます。ファイル名を.で分割し、配列の最後の要素を取得することで拡張子を取得することもできます。私はあなたが使用しているスタイルシートへのアクセス権を持っていないとして、彼らは一例に表示されるので、私は単にi要素内のテキストを配置

$('.b_article-full a').each(function() { 
 
    var extension = $(this).attr('href').split('.').pop().toLowerCase(); 
 
    switch (extension) { 
 
     case 'pdf': 
 
     $(this).before('<i class="b_icons pdf">PDF ICON</i>'); 
 
     break; 
 
     case 'zip': 
 
     $(this).before('<i class="b_icons zip">ZIP ICON</i>'); 
 
     break; 
 
     case 'doc': 
 
     case 'docx': 
 
     $(this).before('<i class="b_icons doc">DOC ICON</i>'); 
 
     break; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="b_article-full"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores ea pariatur accusantium sit, alias dicta repellat vitae ad ratione numquam. 
 
    <a href="example.pdf">Distinctio sapiente unde, at eligendi placeat exercitationem eius eveniet sed?</a>. 
 
</p>

注：これを試してみてください。