Como obter a classe do elemento clicado?

228

Não consigo descobrir como obter o classvalor do elemento clicado.

Quando uso o código abaixo, recebo "node-205" sempre.

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
fonte
sua pergunta não é clara ... você está usando algum plugin jquery?
jrharshath
Se for um item clicado, você não deveria usar a função click () para vincular o evento e obter a classe? Talvez eu não entender completamente a questão ...
e-satis

Respostas:

396

Aqui está um exemplo rápido de jQuery que adiciona um evento de clique a cada tag "li" e recupera o atributo de classe para o elemento clicado. Espero que ajude.

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

Da mesma forma, você não precisa envolver o objeto no jQuery:

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

E nos navegadores mais recentes, você pode obter a lista completa dos nomes das classes :

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

Você pode emular classListem navegadores antigos usandomyClass.split(/\s+/);

Fenton
fonte
1
"class" não é um nome de variável válido.
21119 Fred Bergman
1
Uma daquelas situações engraçadas em que o jQuery é o longo caminho. this.className fornecerá o mesmo que $ (this) .attr ("class")
David Gilbertson
e se o elemento tiver mais de um nome de classe?
Dharman
1
Não sei por que, mas o segundo exemplo não pode recuperar o nome da classe para mim. No entanto, o 1º exemplo funciona muito bem! Obrigado! Me ajudou uma tonelada. :)
Chiefwarpaint
38
$("li").click(function(){
    alert($(this).attr("class"));
});
Harpal
fonte
28

Vi essa pergunta e pensei em expandir um pouco mais. Essa é uma expansão da ideia que @SteveFenton teve. Em vez de vincular um clickevento a cada lielemento, seria mais eficiente delegar os eventos de ulbaixo para cima.

Para jQuery 1.7 e superior

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

Documentação: .on()

Para jQuery 1.4.2 - 1.7

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

Documentação: .delegate()

Como último recurso para o jQuery 1.3 - 1.4

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

ou

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

Documentação: .live()

War10ck
fonte
17

Isso deve fazer o truque:

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

Para mais informações sobre o ui.tab, consulte http://jqueryui.com/demos/tabs/#Events

jeroen.verhoest
fonte
O que isto significa? Você poderia explicar isso mais?
É ui.tab em vez de ui.item que você precisa usar. Eu pensei que era ui.item.
jeroen.verhoest
11

Todas as soluções fornecidas forçam você a conhecer o elemento no qual você clicará previamente . Se você deseja obter a classe de qualquer elemento clicado, pode 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
fonte
2
Deve-se notar que, se a obtenção de um ID não é confiável, sempre é possível usá-lo em $(e.target)vez de, $('#' + e.target.id)e o jQuery ainda tratará esse caso razoavelmente.
BobChao87
9
$("div").click(function() {
  var txtClass = $(this).attr("class");
  console.log("Class Name : "+txtClass);
});
Pushkraj
fonte