Selector de atributos extendidos con Menor que & Mayor que en jQuery

Question

¿Cuál sería la forma correcta de extender el selector de atributos jQuery para que sea compatible con Menos que y Mayor que?

Tengo algunos elementos que contienen un atributo personalizado SequenceNumber que contiene un número entero. (Antes de que alguien comience no puedo utilizar la propiedad de datos (¿me parece?) Porque este html se determina en tiempo de ejecución y se genera en el servidor)

De cualquier forma. Lo que busco es lograr la capacidad de seleccionar una serie de elementos que contienen una SequenceNumber entre X e Y.

Así que, básicamente algo como esto

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

Obviamente, yo puedo hacer esto de ir

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

Pero me pregunto si hay una manera de mantequilla?

Answer 1

Usando .filter()

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

He aquí una demostración: http://jsfiddle.net/jFt9N/3/

Answer 2

Puede utilizar jQuery expresiones selectores como este

$.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); 
});