Create your own jQuery filters

Ever needed some custom filters with jQuery? Its easy to do yourself.

The syntax is simply this:

$.expr[':'].FILTERNAME = function(el, i, match, array) {
  // Do your filterstuff here!
  // return true on success
};

Filter by width

Change the font color on all elements that is more then 210px wide..

I am 200px wide

I am 220px wide

I am 225px wide

I am 200px wide

$.expr[':'].width = function(el, i, match, array) {
  return $(el).width() > match[3];
};

$(document).ready(function () {
  $('p:width(210)').css({color: '#FF0000'});
});

<p style="width: 200px;">I am 200px wide</p>
<p style="width: 220px;">I am 220px wide</p>
<p style="width: 225px;">I am 225px wide</p>
<p style="width: 200px;">I am 200px wide</p>