JQuery - How to select all elements with an installed font family?

Question

I need jQuery to return all elements having css

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

.

I think the only way to do this is to iterate over all the elements and check if this css applies to it. Seems to be a slow way to do this?

Is there a way to do this using the jQuery selector?

Answer 1

well, you can extend the jQuery selector 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();

eg.

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