JavaScript
Article

jQuery Filter Function Example

By Sam Deering

Just a quick couple of examples for one of jQuery’s underused functions. The $.filter() function is probably not used as much as more popular functions such as $.find() because it offers a slower speed according to jsperf.

jsperf-find-vs-filter

$.filter() Example 1

Filter all the hyperlinks which target MS Word Documents and PDF’s then attach an event which fires off a Google Analytics custom event tracking.

//checking specific file types
$('a[href]').filter(function()
{
     return /(.pdf|.doc)$/.test($(this).attr('href'));
}).bind('click', function()
{
     _gaq.push(['_trackEvent', window.location.pathname, 'Download', $(this).attr('href')]);
});

$.filter() Example 2

Filter all hyperlinks which target PNG and JPG images… add a nice red border to them.

//get all image links
$('a[href]').filter(function()
{
  return /(jpg|png)$/.test($(this).attr('href'))
}).each(function(i,v)
{
   $(v).css('border','2px solid red');
});
Sam Deering
Meet the author
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

No Reader comments

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!