Skip to main content
added 1471 characters in body
Source Link
Brad Christie
  • 101.2k
  • 16
  • 157
  • 200

DemoDemo

(function($){
    $.expr[':'].classes = function(o,i,m,s){
        var classesc = parseInto.className.match(/\s*(.*)\s*/)[0].split(/\s+/).length;
        
        // Hard [fixed] limit
        // :classes(N)
        if (/^\d+$/.test(m[3])) ||{
 1           var n = parseInt(m[3], 10);
            return o.className.split(/\s+/).length >=== classes;n;
        };
})(jQuery);        
        // Expression:
        // Elements:classes(>N) with 2+  :classes(>=N)
$        // :classes('div>N)    :classes(2<=N)'
        else if (/^[<>]=?\d+$/.test(m[3])) {
            var e = m[3].cssmatch('color'/^[><]=?/)[0],'red'
                n = m[3].match(/\d+$/);[0];
            switch (e){
                case '<':
                    return c < n;
                case '<=':
                    return c <= n;
                case '>':
                    return c > n;
                case '>=':
                    return c >= n;
            }
        }
        
        // ElementsRange
 with 3+      // :classes(4-6)
$        else if ('div:classes/^\d+\-\d+$/.test(3m[3])') {
            var ln = parseInt(m[3].cssmatch('font-weight'/^(\d+)/)[0], 'bold'10),
                hn = parseInt(m[3].match(/(\d+)$/)[0], 10);
            return ln <= c && c <= hn;
        }
       
        // Elementsall withelse 4+fails
 classes       return false;
$('div:classes(4)'    };
}).css('background-color','blue'jQuery);

Updated Added a bit more flexibility with regards to the argument you can supply. Now you have the following options (replacing N & M with numbers):

  • :classes(N)
    Finds elements with exactly N classes
  • :classes(<=N)
    Finds elements with N or fewer classes
  • :classes(<N)
    Finds elements with fewer than N classes
  • :classes(>=N)
    Finds elements with N or more classes
  • :classes(>N)
    Finds elements with more than N classes
  • :classes(N-M)
    Finds elements whose class count falls between N and M

Demo

(function($){
    $.expr[':'].classes = function(o,i,m,s){
        var classes = parseInt(m[3] || 1, 10);
        return o.className.split(/\s+/).length >= classes;
    };
})(jQuery);

// Elements with 2+ classes
$('div:classes(2)').css('color','red');

// Elements with 3+ classes
$('div:classes(3)').css('font-weight', 'bold');

// Elements with 4+ classes
$('div:classes(4)').css('background-color','blue');

Demo

(function($){
    $.expr[':'].classes = function(o,i,m,s){
        var c = o.className.match(/\s*(.*)\s*/)[0].split(/\s+/).length;
        
        // Hard [fixed] limit
        // :classes(N)
        if (/^\d+$/.test(m[3])) {
            var n = parseInt(m[3], 10);
            return o.className.split(/\s+/).length == n;
        }
        
        // Expression:
        // :classes(>N)    :classes(>=N)
        // :classes(>N)    :classes(<=N)
        else if (/^[<>]=?\d+$/.test(m[3])) {
            var e = m[3].match(/^[><]=?/)[0],
                n = m[3].match(/\d+$/)[0];
            switch (e){
                case '<':
                    return c < n;
                case '<=':
                    return c <= n;
                case '>':
                    return c > n;
                case '>=':
                    return c >= n;
            }
        }
        
        // Range
        // :classes(4-6)
        else if (/^\d+\-\d+$/.test(m[3])) {
            var ln = parseInt(m[3].match(/^(\d+)/)[0], 10),
                hn = parseInt(m[3].match(/(\d+)$/)[0], 10);
            return ln <= c && c <= hn;
        }
       
        // all else fails
        return false;
    };
})(jQuery);

Updated Added a bit more flexibility with regards to the argument you can supply. Now you have the following options (replacing N & M with numbers):

  • :classes(N)
    Finds elements with exactly N classes
  • :classes(<=N)
    Finds elements with N or fewer classes
  • :classes(<N)
    Finds elements with fewer than N classes
  • :classes(>=N)
    Finds elements with N or more classes
  • :classes(>N)
    Finds elements with more than N classes
  • :classes(N-M)
    Finds elements whose class count falls between N and M
added 369 characters in body
Source Link
Brad Christie
  • 101.2k
  • 16
  • 157
  • 200

Add them together in the selector.A different understanding leads me to a better solution (my apologies for jumping to a conclusion):

Demo

.foo (function($){ 
 .   $.expr[':'].classes }
.bar= function(o,i,m,s){ 
 ... }      var classes = parseInt(m[3] || 1, 10);
.baz {       return o.className.split(/\s+/).length >= classes;
    };
})(jQuery);

// Elements with 2+ classes
$('div:classes(2)'.foo.bar.baz')..css('color','red');

// Elements with 3+ classes
$('div:classes(3)').css('font-weight', 'bold');

// Elements with 4+ classes
$('div:classes(4)').css('background-color','blue');

jQuery's Site even shows an example selecting $(".myclass.otherclass") (in the bottom example).

Add them together in the selector.

.foo { ... }
.bar { ... }
.baz { ... }

$('.foo.bar.baz')....

jQuery's Site even shows an example selecting $(".myclass.otherclass") (in the bottom example).

A different understanding leads me to a better solution (my apologies for jumping to a conclusion):

Demo

(function($){ 
    $.expr[':'].classes = function(o,i,m,s){ 
        var classes = parseInt(m[3] || 1, 10);
        return o.className.split(/\s+/).length >= classes;
    };
})(jQuery);

// Elements with 2+ classes
$('div:classes(2)').css('color','red');

// Elements with 3+ classes
$('div:classes(3)').css('font-weight', 'bold');

// Elements with 4+ classes
$('div:classes(4)').css('background-color','blue');
Source Link
Brad Christie
  • 101.2k
  • 16
  • 157
  • 200

Add them together in the selector.

.foo { ... }
.bar { ... }
.baz { ... }

$('.foo.bar.baz')....

jQuery's Site even shows an example selecting $(".myclass.otherclass") (in the bottom example).