Extending attributes selector with Less Than & Greater Than in jQuery

Question

What would be the correct way to extend the jQuery attributes selector so that it supports Less Than and Greater Than?

I have some elements which contain a custom attribute SequenceNumber holding an integer. (Before anyone starts I cant use the data property (I think?) because this html is determined at runtime and generated serverside)

Either way. What I am looking to achieve is the ability to select a number of elements that contain a SequenceNumber BETWEEN X AND Y.

So basically something like this

$("#divSequenceGrid ul[SequenceNumber=>'1'][SequenceNumber<='10']").each(func);

Obviously I can do this by going

$("#divSequenceGrid ul").each(function (index, value) {
    //Push into an array those that fit my criteria 
});

But I'm wondering if there is a butter way?

Answer 1

Using .filter()

  $("#divSequenceGrid ul").filter(function(){
        return  $(this).attr("sequenceNumber") >=1 && $(this).attr("sequenceNumber") <=10}).css("color", "red");

Here's a demo: http://jsfiddle.net/jFt9N/3/

Answer 2

You can use jQuery Selector expressions like this

$.extend($.expr[':'], {
  sMore: function(e, i, m) { return parseInt($(e).attr('SequenceNumber')) >= m[3]; },
  sLess: function(e, i, m) { return parseInt($(e).attr('SequenceNumber')) <= m[3]; }
});

$(function () {
  alert($('div:sMore(2):sLess(4)').length);
});