membuat jquery custom selector (image filter)

custom selector ini saya buat untuk menyaring set elements dari image berdasarkan ekstensi image tersebut berikut script nya

</pre>
<!DOCTYPE HTML>
<html lang="en-US">
<!--
ini adalah image selector yang digunakan untuk menyaring set elements image
dengan cara memilih extensi image yang ingin di saring
misal memilih image dengan ekstensi jpg saja atau png saja atau jpg,png dsb
-->
<head>
<meta charset="utf-8"/>
<meta name="author" content="Mohamad Albar"/>
<script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
<!--
(function($){
$(function(){
$.extend($.expr[':'],{
imageFilt:function(el,i,m){
// parse selector dengan regex
if(m[3]==""){
return false
}
parse=$.trim(m[3]).split(',')
// gabung hasil parse menjadi stirng kembali dengan pemisah yang berbeda
var gabung=parse.join('|')
// buat regex
var pattern=new RegExp("^.+\.("+gabung+")$","i")

return pattern.test($(el).attr("src"))
}
})
// penggunaan
// 1.$("img:imageFilt(jpg)").width("500px")
// 2.$("img").filter(":imageFilt(jpg)").width("500px")

$("img:imageFilt(jpg)").width("500px").end().add("img:imageFilt(png)").css("border","3px solid red")
})
})(jQuery)
// -->
</script>
</head>

<body>
<img src="../project/gambar/gambar1.jpg" width="200px"/>
<img src="../project/gambar/gambar2.png" width="200px"/>
<img src="../project/gambar/gambar3.jpg" width="200px"/>
</body>
</html>
<pre>

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google

You are commenting using your Google account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s