jQuery - How to select all elements with a set font-family applied to them?

Question

I need a way for jQuery to return all elements that have the css

font-family:AvantGardeITCbyBT-Bold, sans-serif;

applied to them.

I'm thinking the only way of doing this is looping through all elements and checking if this css is applied to it. Seems a slow way of doing it?

Is there a way of doing this via a jQuery Selector?

Answer 1

well, you can extend the jQuery selectors with

$(document).ready(function(){
   $.extend($.expr[':'], {
     AvantGardel: function(elem){
        var $e = $(elem);
        return( typeof $e.css('font-family') !== 'undefined' && $e.css('font-family') === 'AvantGardeITCbyBT-Bold' );
     },
     SansSerif: function(elem){
       var $e = $(elem);
        return( typeof $e.css('font-family') !== 'undefined' && $e.css('font-family') === 'sans-serif' );
     }
 });    
});​

and then call

$(':AvantGardel').hide();

or

$(':SansSerif').hide();

for instance.

working example: http://jsbin.com/idova3/edit