javascript - name - jquery selector class contains

Obtener el nombre de la clase usando jQuery

Question

Quiero obtener el nombre de la clase usando jQuery

Y si tiene una identificación.

<div class="myclass"></div>

Answer 1

Después de obtener el elemento como objeto jQuery por otro medio que no sea su clase, entonces

var className = $(''#sidebar div:eq(14)'').attr(''class'');

debe hacer el truco Para la identificación use .attr(''id'') .

Si está dentro de un controlador de eventos u otro método jQuery, donde el elemento es el nodo DOM puro sin envoltorio, puede usar:

this.className // for classes, and
this.id // for IDs

Ambos son métodos estándar de DOM y están bien soportados en todos los navegadores.

Answer 2

Es mejor usar .hasClass() cuando quiere verificar si un elemento tiene una class particular. Esto se debe a que cuando un elemento tiene varias class no es trivial verificarlo.

Ejemplo:

<div id=''test'' class=''main divhover''></div>

Dónde:

$(''#test'').attr(''class'');        // returns `main divhover`.

Con .hasClass() podemos probar si el div tiene la clase divhover .

$(''#test'').hasClass(''divhover''); // returns true
$(''#test'').hasClass(''main'');     // returns true

Answer 3

Esto es para obtener la segunda clase en varias clases usando un elemento

var class_name = $(''#videobuttonChange'').attr(''class'').split('' '')[1];

Answer 4

Para completar la respuesta de Whitestock (que es lo mejor que encontré) hice:

className = $(this).attr(''class'').match(/[/d/w-_]+/g);
className = ''.'' + className.join('' .'');

Entonces, para "myclass1 myclass2" el resultado será ''.myclass1 .myclass2''

Answer 5

Puedes obtener el nombre de la clase de dos maneras:

var className = $(''.myclass'').attr(''class'');

O

var className = $(''.myclass'').prop(''class'');

Answer 6

Si desea obtener clases de div y luego quiere comprobar si existe alguna clase, entonces use de forma simple.

if ( $(''#div-id'' ).hasClass( ''classname'' ) ) {
    // do something...
}

p.ej;

if ( $(''body'').hasClass( ''home'' ) ) {
    $(''#menu-item-4'').addClass(''active'');
}

Answer 7

Si no conoce el nombre de la clase PERO conoce la ID, puede intentar esto:

<div id="currentST" class="myclass"></div>

Entonces llámalo usando:

alert($(''#currentST'').attr(''class''));

Answer 8

Si su <div> tiene una id :

​<div id="test" class="my-custom-class"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

...puedes probar:

var yourClass = $("#test").prop("class");

Si su <div> tiene solo una class , puede intentar:

var yourClass = $(".my-custom-class").prop("class");

Answer 9

Si tenemos solo o queremos primer elemento div podemos usar

$(''div'')[0].className contrario necesitamos un id de ese elemento

Answer 10

Si va a usar la función de división para extraer los nombres de clase, entonces tendrá que compensar las posibles variaciones de formato que podrían producir resultados inesperados. Por ejemplo:

" myclass1  myclass2 ".split('' '').join(".")

produce

".myclass1..myclass2."

Creo que es mejor usar una expresión regular para hacer coincidir en el conjunto de caracteres permitidos para los nombres de clase. Por ejemplo:

" myclass1  myclass2  ".match(/[/d/w-_]+/g);

produce

["myclass1", "myclass2"]

La expresión regular probablemente no sea completa, pero espero que entiendas mi punto. Este enfoque mitiga la posibilidad de un formateo deficiente.

Answer 11

Tenga cuidado, tal vez, usted tiene una clase y una subclase.

  <div id=''id'' class=''myclass mysubclass'' >dfdfdfsdfds</div>

Si utiliza soluciones anteriores, tendrá:

myclass mysubclass

Entonces, si quieres tener el selector de clase , haz lo siguiente:

var className = ''.''+$(''#id'').attr(''class'').split('' '').join(''.'')

y tendrás

.myclass.mysubclass

Ahora, si desea seleccionar todos los elementos que tengan la misma clase, como div arriba:

   var brothers=$(''.''+$(''#id'').attr(''class'').split('' '').join(''.''))

eso significa

var brothers=$(''.myclass.mysubclass'')

Actualización 2018

O se puede implementar con javascript de vainilla en 2 líneas:

  const { classList } = document.querySelector(''#id'');
  document.querySelectorAll(`.${Array.from(classList).join(''.'')}`);

Answer 12

simplemente puedes usar,

var className = $(''#id'').attr(''class'');

Answer 13

Intentalo

HTML

<div class="class_area-1">
    area 1
</div>

<div class="class_area-2">
    area 2
</div>

<div class="class_area-3">
    area 3
</div>

jQuery

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="application/javascript">
    $(''div'').click(function(){
        alert($(this).attr(''class''));
    });
</script>

Answer 14

<div id="elem" class="className"></div>

Con Javascript

document.getElementById(''elem'').className;

Con jQuery

$(''#elem'').attr(''class'');

O

$(''#elem'').get(0).className;