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 width

JS CODE

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

$(document).ready(function () {
  $('#filter_1 p:width(210)').css( { 'border' : '1px solid red' } ); 
});

HTML CODE

<div id="filter_1">
  <p style="width:200px;">Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p style="width:200px;">Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p style="width:200px;">Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p style="width:200px;">Lorem ipsum</p>
  <p>Lorem ipsum</p>
</div>

Filter content by font-face

JS CODE

$.expr[':'].hasFont = function(el, i, match, array) {
  return ($(el).css('font-family').split(',')[0].toLowerCase() == match[3].toLowerCase());
};

$(document).ready(function () {
  $('#filter_2 p:hasFont(tahoma)').css( { 'border' : '1px solid green' } ); 
  $('#filter_2 p:hasFont(georgia)').css( { 'border' : '1px solid blue' } ); 
  $("#filter_2 p:hasFont('Times New Roman')").css( { 'border' : '1px solid yellow' } ); 
});

HTML CODE

<div id="filter_2">
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p style="font-family: georgia;">Lorem ipsum</p>
  <p style="font-family: Times new Roman;">Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p style="font-family: tahoma;">Lorem ipsum</p>
  <p style="font-family: tahoma;">Lorem ipsum</p>
  <p>Lorem ipsum</p>
</div>