0

ページ上のすべてのリンクを検索し、タグがリンクするファイルの種類を識別し、適切なクラスを追加する小さな jQuery/javascript 関数を作成しようとしています。このタスクの目的は、リンクの反対側のファイルの種類に応じてリンクのスタイルを設定することです。

これまでのところ、私はこれを持っています:

$(document).ready(function(){
    $('#rt-mainbody a').each(function(){
        linkURL = $(this).attr('href');
        var match = linkURL.match("^.*\.(pdf|PDF)$");
        if(match != null){$(this).addClass('pdf');}
    });
});

これをいじってください。

そして、たとえば、スプレッドシート ファイル、Word ドキュメント、テキスト ファイル、jpg などを識別するという概念を続けます。

それは機能します...しかし、問題は、SOとインターネットで見つけたオッズと芝から完全に失敗したため、私にとってこれは非常に不格好です-もっときちんとした、より効率的な、これを行うためのより読みやすい方法ですが、それが何であるかはわかりません。誰かが唾を吐きかけて磨いてくれませんか？

理想的には、関数は、(a) 拡張子が href 文字列の末尾にあること、および (b) 拡張子の前にドットがあることを検出する必要があります。

ありがとう！:)

編集

わお！こんな反応！：） みんなありがとう！

単純にセレクターを使用する方法を見たとき、それは少し顔をしかめた瞬間でした - しかし、私がこのアプリを構築しているエンドユーザーは、多数のリソース Web サイトの PDF (および場合によっては他の MIME) にリンクしており、それらを制御することはできません。それらがリンクするファイル名のケースの使用...セレクターを使用することは、結果が非​​常に矛盾するため、明らかに行く方法ではありません。

編集

そして大賞は @Dave Stein に贈られます!! :D

私が採用する解決策は、大文字と小文字を問わず、あらゆる拡張機能に対応する「設定してそのままにする」スクリプトです (私をいじってください)。

私がすでに最善の解決策にかなり近づいていたことを知って本当に良かったです...良い判断よりも運が良かったのですが、XD

4

7 に答える 7

2

文字列を検索するために使用したくないregexので、リンクだけに絞り込んだことが気に入っています。保存した$(this)ので、二重に呼び出す必要はありません。regexまた、大文字と小文字を区別しないように変更しました。そして最後に、クラスが一致したものを追加していることを確認しました。これはあなたが望むものを達成しますか？

$(document).ready(function(){
    $('#rt-mainbody a').each(function(){
        var $link = $(this),
            linkURL = $link.attr('href'),
            // I can't remember offhand but I think some extensions have numbers too
            match = linkURL.match( /^.*\.([a-z0-9]+)$/i );

        if( match != null ){
          $link.addClass( match[1].toLowerCase() );
        }
    });
});

ああ、私はほとんど忘れていlinkURLました。グローバルではないことを確認しました。:)

于 2013-09-03T02:14:47.933 に答える
2

「属性の末尾」セレクター:

$('#rt-mainbody a[href$=".pdf"], #rt-mainbody a[href$=".PDF"]').addClass('pdf')

編集:またはより一般的かつ柔軟に:

var types = {
  doc: ['doc', 'docx'],
  pdf: ['pdf'],
  // ...
};

function addLinkClasses(ancestor, types) {
  var $ancestor = $(ancestor);
  $.each(types, function(type, extensions) {
    selector = $.map(extensions, function(extension) {
        return 'a[href$=".' + extension + '"]';
      }).join(', ');
    $ancestor.find(selector).addClass(type);
  });
}

addLinkClasses('#rt-mainbody', types);

これは大文字と小文字が区別されるため、サーバーではすべての拡張子を小文字に正規化することをお勧めします。

于 2013-09-03T02:16:57.623 に答える
0

@Amadanから構築する別の答えは次のとおりです。

var extensions = [
  'pdf',
  'jpg',
  'doc'
];

$.each( extensions, function( i, v) {
  $('#rt-mainbody').find( 'a[href$=".' + v + '"], a[href$=".' + v.toUpperCase() + '"]')
  .addClass( extension );
});
于 2013-09-03T02:27:23.297 に答える
0

正規表現は/^.*\.(pdf)$/i.

于 2013-09-03T02:15:10.860 に答える
0

この正規表現を使用します (引用符なし):

/\.(pdf|doc)$/i

この正規表現は、.pdf、.doc などで終わるものすべてに一致します (大文字と小文字は区別されません)。

動的クラスの場合:

    var match = linkURL.match(/\.(pdf|doc)$/i);
    match = match ? match[1].toLowerCase() : null;
    if (match != null) {
        $(this).addClass(match);
    }
于 2013-09-03T02:17:30.570 に答える
0

私が行う唯一の提案は、可能なファイル拡張子ごとに異なる正規表現検索を行う代わりに、一致を変更してファイル拡張子を調べることができるということです。

var linkURL = $(this).attr('href');  //<--you were accidentally declared linkURL as a global BTW.
var match = linkURL.match(/\.(.*)$/);
if(match != null){
   //we can extract the part between the parens in our regex
   var ext = match[1].toLowerCase() 
   switch(ext){
      case 'pdf': $(this).addClass('pdf'); break;
      case 'jpg': $(this).addClass('jpg'); break;
      //...
   }
}

この switch ステートメントは、ファイル拡張子とは異なるクラス名を使用するオプションが必要な場合に最も役立ちます。ファイル拡張子が常に同じである場合は、正規表現を必要なファイル拡張子に合うものに変更することを検討できます

/\.(pdf|jpg|txt)$/i  //i for "case insensitive"

そして、ただする

var ext = match[1].toLowerCase() 
$(this).addClass(ext);
于 2013-09-03T02:31:53.003 に答える
0

これをセレクターで使用できます（pdfファイルへのすべてのリンクを見つけるため）

a[href$=".pdf"]
于 2013-09-03T02:19:41.637 に答える