Jak uzyskać klasę klikniętego elementu?


228

Nie mogę wymyślić, jak uzyskać classwartość klikniętego elementu.

Kiedy używam kodu poniżej, za każdym razem dostaję „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>

twoje pytanie jest raczej niejasne ... czy używasz wtyczki jquery?
jrharshath

Jeśli jest to element kliknięty, czy nie powinieneś używać funkcji click () do powiązania zdarzenia i uzyskania klasy? Może nie do końca zrozumiałem pytanie ...
e-satis

Odpowiedzi:


396

Oto szybki przykład jQuery, który dodaje zdarzenie click do każdego znacznika „li”, a następnie pobiera atrybut klasy dla klikniętego elementu. Mam nadzieję, że to pomoże.

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

Podobnie nie musisz zawijać obiektu w jQuery:

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

W nowszych przeglądarkach możesz uzyskać pełną listę nazw klas :

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

Możesz emulować classListw starszych przeglądarkach, używającmyClass.split(/\s+/);


1
„klasa” nie jest prawidłową nazwą zmiennej.
Fred Bergman,

1
Jedna z tych zabawnych sytuacji, w których jQuery to długa droga. this.className da ci to samo co $ (this) .attr ("klasa")
David Gilbertson

co jeśli element ma więcej niż jedną nazwę klasy?
Dharman

1
Nie jestem pewien, dlaczego, ale w drugim przykładzie nie mogę odzyskać nazwy klasy. Jednak pierwszy przykład działa świetnie! Dzięki! Pomógł mi tonę. :)
Chiefwarpaint

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

28

Widziałem to pytanie, więc pomyślałem, że mogę go nieco rozwinąć. Jest to rozwinięcie idei, którą miał @SteveFenton. Zamiast przypisywać clickzdarzenia do każdego lielementu, bardziej efektywne byłoby delegowanie zdarzeń z uldołu.

Dla jQuery 1.7 i nowszych

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

Dokumentacja: .on()

Dla jQuery 1.4.2 - 1.7

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

Dokumentacja: .delegate()

W ostateczności dla jQuery 1.3 - 1.4

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

lub

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

Dokumentacja: .live()



11

Wszystkie dostarczone rozwiązania zmuszają Cię do znajomości elementu, który wcześniej klikniesz . Jeśli chcesz uzyskać klasę z dowolnego klikniętego elementu , możesz użyć:

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

2
Należy zauważyć, że jeśli uzyskanie identyfikatora jest niewiarygodne, zawsze można użyć $(e.target)zamiast, $('#' + e.target.id)a jQuery nadal będzie obsługiwać tę sprawę w rozsądny sposób.
BobChao87,

9
$("div").click(function() {
  var txtClass = $(this).attr("class");
  console.log("Class Name : "+txtClass);
});
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.