jQuery obtener clase

Sheeraz Gul 15 febrero 2024
jQuery obtener clase

Este tutorial demuestra cómo obtener el nombre de la clase en jQuery.

jQuery obtener clase

El método attr() puede obtener el nombre de la clase en jQuery. Además de este método, el método hasClass() se puede utilizar para verificar si el elemento en particular tiene un nombre de clase en particular.

Describamos y mostremos ejemplos de ambos métodos.

El método attr() se utiliza para obtener el valor de los atributos de los elementos HTML. Podemos usar el nombre de la clase en el método attr() como parámetro para obtener el nombre de la clase.

La sintaxis para obtener el nombre de la clase utilizando el método attr se encuentra a continuación.

attr('class')

Probemos un ejemplo de este método.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Get Class Name</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            var Name = $("#DELFTSTACK").attr("class");
            alert(Name);
        });
    });
    </script>
</head>
<body>
    <div id="DELFTSTACK" class="Delfstack">Click the button to get the class name for this element.</div>
    <button type="button">Click Here</button>
</body>
</html>

El código anterior alertará el nombre de clase del elemento dado. Ver salida:

jQuery obtener clase

Comprobemos si la clase tiene el nombre que obtuvimos del método attr(). Para ello, podemos utilizar el método hasClass().

Ver ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Get Class Name</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            var Name = $("#DELFTSTACK").attr("class");
            if ($( "#DELFTSTACK" ).hasClass( Name )){
                alert(Name);
            }
        });
    });
    </script>
</head>
<body>
    <div id="DELFTSTACK" class="Delfstack">Click the button to get the class name for this element.</div>
    <button type="button">Click Here</button>
</body>
</html>

El código anterior tendrá un resultado similar porque el método attr nos devolverá el nombre de clase correcto, y hasClass devolverá true. Ver salida:

jQuery tiene clase

Sheeraz Gul avatar Sheeraz Gul avatar

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

Artículo relacionado - jQuery Class