Bagaimana cara mendapatkan kelas elemen yang diklik?

228

Saya tidak tahu bagaimana cara mendapatkan classnilai dari elemen yang diklik.

Ketika saya menggunakan kode di bawah, saya mendapatkan "node-205" setiap kali.

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
sumber
pertanyaan Anda agak tidak jelas ... apakah Anda menggunakan plugin jquery?
jrharshath
Jika ini item yang diklik, bukankah seharusnya Anda menggunakan fungsi klik () untuk mengikat acara dan mendapatkan kelas? Mungkin aku tidak mengerti sepenuhnya pertanyaan ...
e-satis

Jawaban:

396

Berikut adalah contoh jQuery cepat yang menambahkan acara klik untuk setiap tag "li", dan kemudian mengambil atribut kelas untuk elemen yang diklik. Semoga ini bisa membantu.

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

Sama, Anda tidak harus membungkus objek dalam jQuery:

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

Dan di browser yang lebih baru Anda bisa mendapatkan daftar lengkap nama kelas :

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

Anda dapat meniru classListdi browser lama menggunakanmyClass.split(/\s+/);

Fenton
sumber
1
"class" bukan nama variabel yang valid.
Fred Bergman
1
Salah satu situasi lucu di mana jQuery jauh. this.className akan memberi Anda sama dengan $ (ini) .attr ("class")
David Gilbertson
bagaimana jika elemen tersebut memiliki lebih dari satu nama kelas?
Dharman
1
Tidak yakin mengapa tetapi contoh 2 tidak dapat mengambil nama kelas untuk saya. Namun, contoh pertama berfungsi dengan baik! Terima kasih! Bantu saya satu ton. :)
Chiefwarpaint
38
$("li").click(function(){
    alert($(this).attr("class"));
});
Harpal
sumber
28

Saya melihat pertanyaan ini jadi saya pikir saya mungkin akan mengembangkannya sedikit lagi. Ini adalah perluasan dari ide yang dimiliki @SteveFenton. Daripada mengikat clickacara ke setiap lielemen, akan lebih efisien untuk mendelegasikan acara dari ulbawah.

Untuk jQuery 1.7 dan lebih tinggi

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

Dokumentasi: .on()

Untuk jQuery 1.4.2 - 1.7

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

Dokumentasi: .delegate()

Sebagai pilihan terakhir untuk jQuery 1.3 - 1.4

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

atau

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

Dokumentasi: .live()

War10ck
sumber
17

Ini harus melakukan trik:

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

Untuk info lebih lanjut tentang ui.tab, lihat http://jqueryui.com/demos/tabs/#Events

jeroen.verhoest
sumber
Apa artinya ini? Bisakah Anda menjelaskan lebih lanjut?
Ini ui.tab bukan ui.item yang perlu Anda gunakan. Saya pikir itu ui.item.
jeroen.verhoest
11

Semua solusi yang disediakan memaksa Anda untuk mengetahui elemen yang akan Anda klik sebelumnya . Jika Anda ingin mendapatkan kelas dari elemen apa pun yang diklik, Anda dapat menggunakan:

$(document).on('click', function(e) {
    clicked_id = e.target.id;
    clicked_class = $('#' + e.target.id).attr('class');
    // do stuff with ids and classes 
    })
Berhubung dgn sibernetika
sumber
2
Perlu dicatat bahwa jika mendapatkan id tidak dapat diandalkan, seseorang dapat selalu menggunakan dan $(e.target)bukan $('#' + e.target.id)jQuery masih akan menangani kasus ini secara wajar.
BobChao87
9
$("div").click(function() {
  var txtClass = $(this).attr("class");
  console.log("Class Name : "+txtClass);
});
Pushkraj
sumber