Comment obtenir la classe de l'élément cliqué?

228

Je ne peux pas comprendre comment obtenir la classvaleur de l'élément cliqué.

Lorsque j'utilise le code ci-dessous, j'obtiens "node-205" à chaque fois.

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
la source
votre question n'est pas claire ... utilisez-vous un plugin jquery?
jrharshath
S'il s'agit d'un élément cliqué, ne devriez-vous pas utiliser la fonction click () pour lier l'événement et obtenir la classe? Peut-être que je n'ai pas bien compris la question ...
e-satis

Réponses:

396

Voici un exemple rapide de jQuery qui ajoute un événement click à chaque balise "li", puis récupère l'attribut de classe pour l'élément cliqué. J'espère que ça aide.

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

De même, vous n'avez pas à encapsuler l'objet dans jQuery:

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

Et dans les nouveaux navigateurs, vous pouvez obtenir la liste complète des noms de classe :

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

Vous pouvez émuler classListdans des navigateurs plus anciens en utilisantmyClass.split(/\s+/);

Fenton
la source
1
"classe" n'est pas un nom de variable valide.
Fred Bergman
1
Une de ces situations amusantes où jQuery est le long chemin. this.className vous donnera la même chose que $ (this) .attr ("class")
David Gilbertson
que faire si l'élément a plus d'un nom de classe?
Dharman
1
Je ne sais pas pourquoi mais le 2ème exemple ne peut pas récupérer le nom de classe pour moi. Cependant, le 1er exemple fonctionne très bien! Merci! M'a aidé une tonne. :)
Chiefwarpaint
38
$("li").click(function(){
    alert($(this).attr("class"));
});
Harpal
la source
28

J'ai vu cette question alors j'ai pensé que je pourrais développer un peu plus. Il s'agit d'une extension de l'idée qu'avait @SteveFenton. Au lieu de lier un clickévénement à chaque liélément, il serait plus efficace de déléguer les événements de ulbas en haut.

Pour jQuery 1.7 et supérieur

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

Documentation: .on()

Pour jQuery 1.4.2 - 1.7

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

Documentation: .delegate()

En dernier recours pour 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"));
});

Documentation: .live()

War10ck
la source
17

Cela devrait faire l'affaire:

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

Pour plus d'informations sur ui.tab, voir http://jqueryui.com/demos/tabs/#Events

jeroen.verhoest
la source
Qu'est-ce que ça veut dire? Pourriez-vous expliquer cela davantage?
C'est ui.tab au lieu de ui.item que vous devez utiliser. Je pensais que c'était ui.item.
jeroen.verhoest
11

Toutes les solutions proposées vous obligent à connaître l'élément sur lequel vous cliquerez au préalable . Si vous souhaitez obtenir la classe d' un élément cliqué, vous pouvez utiliser:

$(document).on('click', function(e) {
    clicked_id = e.target.id;
    clicked_class = $('#' + e.target.id).attr('class');
    // do stuff with ids and classes 
    })
Cybernétique
la source
2
Il convient de noter que si l'obtention d'un identifiant n'est pas fiable, on peut toujours utiliser à la $(e.target)place de $('#' + e.target.id)et jQuery traitera toujours ce cas de manière raisonnable.
BobChao87
9
$("div").click(function() {
  var txtClass = $(this).attr("class");
  console.log("Class Name : "+txtClass);
});
Pushkraj
la source