jquery selector id,class,rel etc where value greater than a given number

Question

I would like to fade all divs that have a numeric attribute greater than or less than a given number.

Something like $( "div[id$=2]" ).fadeTo("slow", 0.6);

but I would like to use the ">" or "<" operator instead of "="

basically I would name all my divs something like

<div id="22">text</div>
<div id="35">text</div>
<div id="40">text</div>

and then use

$( "div[id$>35]" ).fadeTo("slow", 0.6); 

to fade out the last cell

Answer 1

This isn't valid HTML. An id may not start with a digit. Instead, you may find the :gt selector helpful. You can use, e.g. td:gt(4) to find those tds with 0-index > 4, or #container div:gt(1) to find divs in container with index > 1.

Answer 2

First of all, your HTML is not valid. ID attribute should not start with a number.

do it like this,

<div id="div22" class="fade">text</div>
<div id="div35" class="fade">text</div>
<div id="div40" class="fade">text</div>

then jQuery

var divs = $('.fade').map(function(){
                if (this.id.replace('div','') > 35) return '#'+this.id;
           }).get().join(',');

$(divs).fadeTo("slow", 0.6); 

You may play it here.

this works too,

var divs = $('.fade').map(function(){
            if (this.id.replace('div','') > 22) return this;
       }).get();
$(divs).fadeOut("slow"); 

as Russ Cam suggested to use filter,

var divs = $('.fade').filter(function(){
            return (this.id.replace('div','') > 22);
       });
$(divs).fadeOut("slow");