Come ottenere la classe dell'elemento cliccato?


228

Non riesco a capire come ottenere il classvalore dell'elemento cliccato.

Quando uso il codice qui sotto, ottengo sempre "node-205" .

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>

la tua domanda non è abbastanza chiara ... stai usando qualche plugin jquery?
jrharshath,

Se si tratta di un elemento cliccato, non dovresti usare la funzione click () per associare l'evento e ottenere la classe? Forse non ho capito appieno la domanda ...
e-satis

Risposte:


396

Ecco un breve esempio di jQuery che aggiunge un evento click a ciascun tag "li", quindi recupera l'attributo di classe per l'elemento cliccato. Spero che sia d'aiuto.

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

Allo stesso modo, non è necessario avvolgere l'oggetto in jQuery:

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

E nei browser più recenti è possibile ottenere l' elenco completo dei nomi delle classi :

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

Puoi emulare classListnei browser più vecchi usandomyClass.split(/\s+/);


1
"class" non è un nome di variabile valido.
Fred Bergman,

1
Una di quelle situazioni divertenti in cui jQuery è la lunga strada. this.className ti darà lo stesso di $ (this) .attr ("class")
David Gilbertson,

cosa succede se l'elemento ha più di un nome di classe?
Dharman,

1
Non so perché, ma il secondo esempio non può recuperare il nome della classe per me. Tuttavia, il primo esempio funziona alla grande! Grazie! Mi ha aiutato un sacco. :)
Chiefwarpaint,

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

28

Ho visto questa domanda, quindi ho pensato di poterci espandere un po 'di più. Questa è un'espansione dell'idea che ha avuto @SteveFenton. Invece di associare un clickevento a ciascun lielemento, sarebbe più efficiente delegare gli eventi dal ulbasso.

Per jQuery 1.7 e versioni successive

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

Documentazione: .on()

Per jQuery 1.4.2 - 1.7

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

Documentazione: .delegate()

Come ultima risorsa per 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"));
});

Documentazione: .live()



11

Tutte le soluzioni fornite ti costringono a conoscere in anticipo l'elemento su cui fai clic . Se vuoi ottenere la classe da qualsiasi elemento su cui fai clic , puoi usare:

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

2
Va notato che se ottenere un ID non è affidabile, si può sempre usare al $(e.target)posto di $('#' + e.target.id)e jQuery gestirà comunque questo caso ragionevolmente.
BobChao87,

9
$("div").click(function() {
  var txtClass = $(this).attr("class");
  console.log("Class Name : "+txtClass);
});
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.