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>
sshow
źródło
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+/);

Fenton
źródło
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"));
});
Harpal
źródło
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()

War10ck
źródło
17

To powinno załatwić sprawę:

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

Więcej informacji na temat interfejsu użytkownika znajduje się na stronie http://jqueryui.com/demos/tabs/#Events

jeroen.verhoest
źródło
Co to znaczy? Czy mógłbyś to wyjaśnić?
To jest ui.tab zamiast ui.item, którego musisz użyć. Myślałem, że to ui.item.
jeroen.verhoest
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 
    })
Cybernetyczny
źródło
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);
});
Pushkraj
źródło