Filtering if a custom selector is greater than a number in jQuery

Question

quick one for you. I looked at the selectors in jQuery.com and could not find a way to filter by selector that is greater than a number? I want to do this:

$("[level>'4']").hide();

My html looks like this:

<div id="1" level="4">Test</div>

how can I hide all divs greater than 4 using that or something like that syntax?4

You'd be better off using html 5 `data-` attributes instead of non standard html attributes. E.g. `data-level="4"` instead of `level="4"`. — jrummell, Apr 27 '12 at 19:38

score 6 · Answer 1 · answered Apr 27 '12 at 19:35

6

Try below,

$("[level]").filter(function () {
   return parseInt($(this).attr('level'), 10) > 4;
}).hide();

answered Apr 27 '12 at 19:35

Selvakumar Arumugam

79,297
15
120
134

[DEMO](http://jsfiddle.net/skram/6rGKh/1/) >> http://jsfiddle.net/skram/6rGKh/1/ < – Selvakumar Arumugam Apr 27 '12 at 19:38

score 4 · Answer 2 · answered Apr 27 '12 at 19:36

4

$('div').filter(function(){
  return parseInt($(this).attr('level')) > 4);
});

answered Apr 27 '12 at 19:36

james

170
1
3
9

score 1 · Answer 3 · answered Apr 27 '12 at 19:36

1

Simply do this :

$('[level]').each(function(){
var $this=$(ths);
var level = parseInt($this.attr('level'), 10);
if (level>4) $this.hide();
});

answered Apr 27 '12 at 19:36

Denys Séguret

372,613
87
782
758

score 1 · Answer 4 · answered Jan 08 '13 at 07:10

I needed this particular functionality too where the check is done in the selector rather than as another embedded function. Maybe I did more than I needed to, but it means I can now filter date-based stuff with Isotope using a Selector rather than having to write stuff in each filter call.

What I wrote uses the pseudo-selector stuff with jQuery.

// Hides elements with the attribute "index" that is greater than 4
$(':attrGT("index",4)').hide();

// Filter elements using Isotope with the attribute "data-starttime" that is less than or equal to 1234567890
$container.isotope({
    filter: ':attrLTEq("data-starttime",1234567890)'
});

Here's the initial code for version 1 (I haven't done ANY extensive testing at all, but so far it has worked for me):

(function ($) {
    // Single function to do all the heavy lifting
    function attrGTLTSelector(mode, obj, meta) {
        var args,
            objAttr,
            checkAttr,
            output = false;

        if (typeof meta === 'object') {
            args = meta;
        } else {
            if (meta.match(',')) {
                args = meta.split(/["'\s]*,["'\s]*/);
            } else {
                args = [meta];
            }
        }

        objAttr = parseInt($(obj).attr(args[0]), 10);
        checkAttr = parseInt(args[1], 10);

        switch (mode) {
        case 'lt':
            if (objAttr<checkAttr) output = true;
            break;
        case 'lte':
            if (objAttr<=checkAttr) output = true;
            break;
        case 'gt':
            if (objAttr>checkAttr) output = true;
            break;
        case 'gte':
            if (objAttr>=checkAttr) output = true;
            break;
        }

        if (window.console) if (console.log) console.log('attrGTLTSelector', objAttr, mode, checkAttr, output);

        return output;
    }

    // Add custom pseudo selectors to jQuery
    $.expr[':'].attrLT = function(obj, index, meta, stack){
        return attrGTLTSelector('lt', obj, meta[3]);
    };
    $.expr[':'].attrGT = function(obj, index, meta, stack){
        return attrGTLTSelector('gt', obj, meta[3]);
    };
    $.expr[':'].attrLTEq = function(obj, index, meta, stack){
        return attrGTLTSelector('lte', obj, meta[3]);
    };
    $.expr[':'].attrGTEq = function(obj, index, meta, stack){
        return attrGTLTSelector('gte', obj, meta[3]);
    };
}(jQuery));

Filtering if a custom selector is greater than a number in jQuery

4 Answers4

Linked