¿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>
sshow
fuente
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+/);

Fenton
fuente
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"));
});
Harpal
fuente
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()

War10ck
fuente
17

Esto debería funcionar:

...
select: function(event, ui){ 
   ui.tab.attr('class');
} ,
...

Para obtener más información sobre ui.tab, consulte http://jqueryui.com/demos/tabs/#Events

jeroen.verhoest
fuente
¿Qué significa esto? ¿Podrías explicar eso más?
Es ui.tab en lugar de ui.item lo que necesita usar. Pensé que era ui.item.
jeroen.verhoest
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 
    })
Cibernético
fuente
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);
});
Pushkraj
fuente