¿Cómo obtener la clase del elemento cliqueado?


228

No puedo entender cómo obtener el classvalor del elemento seleccionado.

Cuando uso el siguiente código, obtengo "node-205" cada vez.

jQuery:

.find('> ul')
.tabs(
{
    selectedClass: 'active',
    select: function (event, ui) {
        //shows only the first element of list
        $(this).children('li').attr('class');
    },
    cookie: { expires: 0 },
    fx: fx
})

HTML:

<ul class="tabs">
  <li class="node-205"></li>
  <li class="node-150"></li>
  <li class="node-160"></li>
</ul>

su pregunta no está clara ... ¿está utilizando algún complemento jquery?
jrharshath

Si se trata de un elemento en el que se hizo clic, ¿no debería usar la función click () para vincular el evento y obtener la clase? Tal vez yo no entendía completamente la pregunta ...
e-satis

Respuestas:


396

Aquí hay un ejemplo rápido de jQuery que agrega un evento click a cada etiqueta "li", y luego recupera el atributo de clase para el elemento cliqueado. Espero eso ayude.

$("li").click(function() {
   var myClass = $(this).attr("class");
   alert(myClass);
});

Igualmente, no tiene que envolver el objeto en jQuery:

$("li").click(function() {
   var myClass = this.className;
   alert(myClass);
});

Y en los navegadores más nuevos puede obtener la lista completa de nombres de clase :

$("li").click(function() {
   var myClasses = this.classList;
   alert(myClasses.length + " " + myClasses[0]);
});

Puede emular classListen navegadores antiguos usandomyClass.split(/\s+/);


1
"clase" no es un nombre de variable válido.
Fred Bergman

1
Una de esas situaciones divertidas donde jQuery es el camino largo. this.className le dará lo mismo que $ (this) .attr ("class")
David Gilbertson

¿Qué pasa si el elemento tiene más de un nombre de clase?
Dharman

1
No estoy seguro de por qué, pero el segundo ejemplo no puede recuperar el nombre de la clase para mí. Sin embargo, el primer ejemplo funciona muy bien. ¡Gracias! Me ayudó mucho. :)
Chiefwarpaint

38
$("li").click(function(){
    alert($(this).attr("class"));
});

28

Vi esta pregunta, así que pensé que podría ampliarla un poco más. Esta es una expansión de la idea que tuvo @SteveFenton. En lugar de vincular un clickevento a cada lielemento, sería más eficiente delegar los eventos desde ulabajo.

Para jQuery 1.7 y superior

$("ul.tabs").on('click', 'li', function(e) {
   alert($(this).attr("class"));
});

Documentación: .on()

Para jQuery 1.4.2 - 1.7

$("ul.tabs").delegate('li', 'click', function(e) {
   alert($(this).attr("class"));
});

Documentación: .delegate()

Como último recurso para jQuery 1.3 - 1.4

$("ul.tabs").children('li').live('click', function(e) {
   alert($(this).attr("class"));
});

o

$("ul.tabs > li").live('click', function(e) {
   alert($(this).attr("class"));
});

Documentación: .live()



11

Todas las soluciones proporcionadas te obligan a conocer de antemano el elemento en el que harás clic . Si desea hacer clic en la clase de cualquier elemento , puede usar:

$(document).on('click', function(e) {
    clicked_id = e.target.id;
    clicked_class = $('#' + e.target.id).attr('class');
    // do stuff with ids and classes 
    })

2
Cabe señalar que si obtener una identificación no es confiable, siempre se puede usar en $(e.target)lugar de $('#' + e.target.id)y jQuery aún manejará este caso razonablemente.
BobChao87

9
$("div").click(function() {
  var txtClass = $(this).attr("class");
  console.log("Class Name : "+txtClass);
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.