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>

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+/);


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"));
});

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()



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 
    })

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);
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.