jQuery Manipular las clases de elementos.


Ejemplo

Asumiendo que la página incluye un elemento HTML como:

<p class="small-paragraph">
  This is a small <a href="https://en.wikipedia.org/wiki/Paragraph">paragraph</a>
  with a <a class="trusted" href="http://stackexchange.com">link</a> inside.
</p>

jQuery proporciona funciones útiles para manipular las clases de DOM, sobre todo hasClass() , addClass() , removeClass() y toggleClass() . Estas funciones modifican directamente el atributo de class de los elementos coincidentes.

$('p').hasClass('small-paragraph'); // true
$('p').hasClass('large-paragraph'); // false

// Add a class to all links within paragraphs
$('p a').addClass('untrusted-link-in-paragraph');

// Remove the class from a.trusted
$('a.trusted.untrusted-link-in-paragraph')
.removeClass('untrusted-link-in-paragraph')
.addClass('trusted-link-in-paragraph');

Alternar una clase

Dado el marcado de ejemplo, podemos agregar una clase con nuestro primer .toggleClass() :

$(".small-paragraph").toggleClass("pretty");

Ahora esto devolvería true : $(".small-paragraph").hasClass("pretty")

toggleClass proporciona el mismo efecto con menos código que:

if($(".small-paragraph").hasClass("pretty")){
   $(".small-paragraph").removeClass("pretty");}
else {
   $(".small-paragraph").addClass("pretty"); }

alternar dos clases:

$(".small-paragraph").toggleClass("pretty cool");

Booleano para agregar / eliminar clases:

$(".small-paragraph").toggleClass("pretty",true); //cannot be truthy/falsey

$(".small-paragraph").toggleClass("pretty",false);

Función para alternar la clase (vea el ejemplo más abajo para evitar un problema)

$( "div.surface" ).toggleClass(function() {
  if ( $( this ).parent().is( ".water" ) ) {
    return "wet";
  } else {
    return "dry";
  }
});

Utilizado en ejemplos:

// functions to use in examples
function stringContains(myString, mySubString) {
  return myString.indexOf(mySubString) !== -1;
}
function isOdd(num) { return num % 2;}
var showClass = true; //we want to add the class

Ejemplos:

Usa el índice del elemento para alternar entre las clases impar / par

$( "div.gridrow" ).toggleClass(function(index,oldClasses, false), showClass ) {
  showClass
  if ( isOdd(index) ) {
    return "wet";
  } else {
    return "dry";
  }
});

Más complejo ejemplo de toggleClass , dado un marcado de cuadrícula simple

<div class="grid">
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow gridfooter">row but I am footer!</div>
</div>

Funciones simples para nuestros ejemplos:

function isOdd(num) {
  return num % 2;
}

function stringContains(myString, mySubString) {
  return myString.indexOf(mySubString) !== -1;
}
var showClass = true; //we want to add the class

Agrega una clase par / impar a los elementos con una clase gridrow

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  if (isOdd(index)) {
    return "odd";
  } else {
    return "even";
  }
  return oldClasses;
}, showClass);

Si la fila tiene una clase de gridfooter , elimine las clases impares / pares, conserve el resto.

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  var isFooter = stringContains(oldClasses, "gridfooter");
  if (isFooter) {
    oldClasses = oldClasses.replace('even', ' ').replace('odd', ' ');
    $(this).toggleClass("even odd", false);
  }
  return oldClasses;
}, showClass);

Las clases que se devuelven son las que se efectúan. Aquí, si un elemento no tiene un gridfooter , agregue una clase para par / impar. Este ejemplo ilustra el retorno de la lista de clases OLD. Si esto else return oldClasses; se elimina, solo se agregan las nuevas clases, por lo tanto, la fila con una clase de gridfooter tendría todas las clases eliminadas si no hubiéramos devuelto las anteriores; de lo contrario, se habrían cambiado (eliminado).

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  var isFooter = stringContains(oldClasses, "gridfooter");
  if (!isFooter) {
    if (isOdd(index)) {
      return "oddLight";
    } else {
      return "evenLight";
    }
  } else return oldClasses;
}, showClass);