jQueryを使用してリンクの拡張子を確認してください

Question

私はページ上のすべてのリンクを読み込み、リンク拡張子が '.png'で終わるかどうかを確認しようとしています。そうであれば、そのリンクがクリックされたときに、その画像をつかみ、 'test'クラスでdivに追加したいと思います。リンクが '.png'で終わらない場合は、それを無視して正常に開きます。

<a href="image01.png">Image 01</a> 
<a href="image02.png">Image 02</a> 
<a href="http://www.google.com/">Page</a> 
<a href="image03.png">Image 03</a> 

<div class="test"></div> 

を...と、これは最初のリンクがクリックされたときにマークアップは次のようになりべきかです：：

これは、マークアップで、あなたもjsFiddleにそれをつかむことができ

<a href="image01.png">Image 01</a> 
<a href="image02.png">Image 02</a> 
<a href="http://www.google.com/">Page</a> 
<a href="image03.png">Image 03</a> 

<div class="test"> 
    <img src="image01.png" /> 
</div> 

ありがとう！

Answer 1

は、私たちが必要とする

$('a[href$=".png"]').click(function(e) { // nice one ChristopheCVB 
    $('.test').append($("<img>", {src: this.href})); // neater than "<img src='"+...+">" 
    e.preventDefault(); // should be enough 
}); 

Demo here

次固定の完全な、非常にエレガント（私見）掲載例、エラーの組み合わせや他のもので試してみてください画像が既にあるかどうかを確認するテスト...

Answer 2

ここでは、この

$("a[href$='.png']").click(function(e){ 
    e.preventDefault(); 
    $(".test").append("<img src='"+this.href+"' />"); 
});