jQueryでCDNでホストされているすべての画像に赤い枠線を適用します。

Question

Amazon S3を使用しています。特定の画像がホストされています。 CDNからの画像を確認するために各画像を順番にチェックしたり、新しい画像が追加されたり、画像をアップロードするのを忘れたりするような痛みがあり、デバッグパネルからアクセスできる視覚的な手がかりがあるといいと思いました。

私は、CDNから来ている私のページのすべての画像に赤い枠線を描きたいと思います。

jQueryを使ってどうすればいいですか？イメージはURL（例： 'images.example.com'）で識別する必要があります。

シンプルな赤い枠線よりもきれいな解決策があれば余分な点があります。

$(document).ready(function() { 
    $('[img[src*=yourcdndomain]').addClass('from_cdn'); 
}); 

あなたは代わりに「含む」の「で始まる」をチェックするattribute^=を好むかもしれない：attribute*=セレクタを使用してのような単純な何かについてどのように

Answer 1

。

についてどのように

Answer 2

：あなたのボタンをクリックhttp://docs.jquery.com/Selectors

Answer 3

$('button#checkForCDNImages').click(function() { 
    var message = '', 
     cdnURL = 'http://cdn.mysite.com', 
     $imgs = $('img[src^=' + cdnURL + ']') 
    ; 
    if ($imgs.length) { 
     $imgs 
      .addClass('cdn-image') // apply your own styles for this 
      .each(function() { 
       message += "\n" + this.src.substring(cdnURL.length) + " (" + this.alt + ")"; 
      }) 
      .get(0)   // grab the first one 
      .scrollIntoView() // and scroll to it 
     ; 
     alert ("The following images are on the CDN:" + message); 
    } else { 
     alert ("No images found originating from the CDN."); 
    } 
}); 

を：

$("img[src^=http://images.example.com]").css("border", "solid 1px red"); 

や他のどんなスタイル/エフェクト適用したい...

はjQueryの属性は、セレクタで始まる使用します次のような出力が得られます。

枚の

次の画像は、CDN上にある：
/images/image1.jpg（会社ロゴ）
/images/pr0n.jpg（アンジェリーナ・ジョリー）