1

Partimos de una etiqueta div con un atributo

<div atr="1">a</div>

No he encontrado un operador para este caso, quiero saber si el atributo es mayor que X . Para añadirle la clase disabled. X es cualquier numero ejemplo 5.

$("div [atr<='X']").addClass('disabled');

El operador not equals no me sirve porque hay varios que no deben ser disabled y varios que si.

3
  • Creo que no existe el selector mayor que pero aún así ¿Que diferencia hay entre los que si y los que no?
    – Fly
    Commented el 24 abr. 2019 a las 10:25
  • Es una paginación y puedes escoger cuantos se muestran por pagina e irlo cambiando todo el rato. Por tanto lo que se muestran y los que no cambian en funcion cuantos quieres mostrar por pagina no es estatico
    – Caldeiro
    Commented el 24 abr. 2019 a las 10:31
  • Debieras habituarte a usar las etiquetas predefinidas de HTML5. atr no es una etiqueta válida. Para eso puedes usar data. Para usarlo bastaría con poner data-atr="1" y ya estaría dentro del estándar. Para recogerlo por jquery con usar $('elemento').data('atr') bastaría. Un saludo. Commented el 24 abr. 2019 a las 11:22

2 respuestas 2

5

No puedes usar esos operadores dentro de un selector. Podrías hacer algo así:

 $( "div" ).each(function() {
   if($(this).attr("atr")<='X'){
     $( this ).addClass("disabled");
   }      
});
1
  • A la perfección me ha servido. Algún cambio hice, pero la idea es como tu me lo has planteado.
    – Caldeiro
    Commented el 24 abr. 2019 a las 10:47
2

La respuesta de @MikelFerreiro es correcta, pero podrías optimizar y simplificar el código aún mas usando:

  • $("div[atr]"): para buscar solo aquellos elementos que tengan el atributo atr, de lo contrario estarías buscando TODOS los div en la página.
  • .filter(): para filtrar los elemento que no cumplen con la condición y aprovechar el chaining para aplicar .addClass al resultado.

Demo

$("div[atr]").filter(function() {
  return $(this).attr("atr") <= 2;
}).addClass("disabled");
div[atr] {
  color: red;
}

div[atr].disabled {
  color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div atr="1">A</div>
<div atr="3">B</div>
<div atr="2">C</div>
<div atr="4">D</div>
<div>E</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.