jQuery – Comprueba si un elemento tiene un Class específico

jQuery – Comprueba si un elemento tiene un Class específico

Comprueba si un elemento tiene un Class específico. JQuery tiene métodos incorporados que permiten buscar una clase en específico en un elemento. Al usarlos, puedes comprobar fácilmente la clase en el selector y realizar la acción de acuerdo con la respuesta.

En este tutorial, voy a explicar los siguientes 3 métodos:

• hasClass()
• is()
• attr()

Contenido

1. HTML y CSS
2. hasClass()
3. is()
4. attr()
5. Demo
6. Conclusión

1. HTML y CSS

En esta guía estaremos utilizando el siguiente HTML para buscar la clase .red dentro de los elementos <div> con jQuery.

<style>
.content{
 width: 100px;
 height: 100px;
 display: inline-block;
 color: white;
}

.red{
 background: red;
}

.blue{
 background: blue;
}
</style>

<div class='content red' id='div1'>div1</div>
<div class='content blue' id='div2'>div2</div>
<div class='content red' id='div3'>div3</div><br>
<input type='button' value='Check class' id='check'><br>
 
Result<br>
<ul id='result'></ul>

2. hasClass()

Este método recibe los nombres de las clases como parámetro y busca si el elemento tiene dichas clase. En caso afirmativo devuelve TRUE de lo contrario FALSE.

NOTA – Para verificar más de una clase, debes separar las mismas mediante espacios en blanco (» «).

Syntax –

.hasClass( Classname )

Ejemplo

Pasar el nombre de la clase utilizando el método hasClass().

<script>

$(document).ready(function(){
 $('#check').click(function(){

  // Class name to find
  var findClass = 'red';
  
  $('#result').empty();
 
  // Loop all .content class elements
  $('.content').each(function(){

   // check class
   if( $(this).hasClass(findClass) ){
    $('#result').append("<li>"+this.id+"</li>");
   }

  });
 
 });
});
</script>

3. is()

Comprueba el conjunto de elementos coincidentes actuales contra un selector, un elemento o un objeto jQuery y devuelva true si al menos uno de estos elementos coincide con los argumentos dados.

Syntax –

.is(selector)

Ejemplo

Pase el nombre de la clase a buscar en el método.

<script>
$(document).ready(function(){
 $('#check').click(function(){

  // Class name to find
  var findClass = 'red';
  $('#result').empty();
  // Loop all .content class elements
  $('.content').each(function(){

   // check class
   if ( $( this ).is( "."+findClass ) ) {
    $('#result').append("<li>"+this.id+"</li>");
   }

  });
 
 });
});
</script>

4. attr()

Este método se utiliza para asignar o recibir el atributo de un elemento.

Syntax –

$( selector ).attr( attributeName )

Usando el método attr() para obtener la clase de un elemento y crear un array con él dividiendo el valor por un espacio (» «) si hay más de una clase.

Con el método indexOf() buscamos el nombre de la clase dentro de la matriz, si devuelve un valor mayor que 0, entonces la clase estará disponible en el elemento.

<script>
$(document).ready(function(){
 $('#check').click(function(){

  // Class name to find
  var findClass = 'red';
  $('#result').empty();
  // Loop all .content class elements
  $('.content').each(function(){

   // check class
   var classes = $(this).attr("class");
   var split_classes = classes.split(' ');
   if( split_classes.indexOf(findClass) > 0){
    $('#result').append("<li>"+this.id+"</li>");
   }

  });
 
 });
});
</script>

5. Demo

Haz click en el botón Check class.

6. Conclusión

Comprueba si un elemento tiene un Class específico utilizando el script anterior

El método hasClass() es capaz de buscar una sola o varias clases en el elemento selector. Sólo necesitas especificar el nombre de tu clase en el método separado por espacio (» «).

Enlaces relacionados

Como crear un encabezado fijo animado

Aprender a programar gratis

8 plugins para compartir automáticamente mensajes de WordPress en las redes sociales