Saya ingin mendapatkan nama kelas menggunakan jQuery

Dan jika memiliki id

<div class="myclass"></div>

Setelah mendapatkan elemen sebagai objek jQuery melalui cara lain selain kelasnya, maka

var className = $('#sidebar div:eq(14)').attr('class');

harus melakukan trik. Untuk penggunaan ID .attr('id').

Jika Anda berada di dalam event handler atau metode jQuery lainnya, di mana elemennya adalah simpul DOM murni tanpa pembungkus, Anda bisa menggunakan:

this.className // for classes, and
this.id // for IDs

Keduanya merupakan metode DOM standar dan didukung dengan baik di semua browser.

Lebih baik digunakan .hasClass()ketika Anda ingin memeriksa apakah suatu elemen memiliki tertentu class. Ini karena ketika suatu elemen memiliki banyak, classitu tidak mudah untuk diperiksa.

Contoh:

<div id='test' class='main divhover'></div>

Dimana:

$('#test').attr('class');        // returns `main divhover`.

Dengan .hasClass()kita dapat menguji apakah divmemiliki kelas divhover.

$('#test').hasClass('divhover'); // returns true
$('#test').hasClass('main');     // returns true

Hati-hati, Mungkin, Anda memiliki kelas dan subkelas.

  <div id='id' class='myclass mysubclass' >dfdfdfsdfds</div>

Jika Anda menggunakan solusi sebelumnya, Anda akan memiliki:

myclass mysubclass

Jadi, jika Anda ingin memiliki pemilih kelas , lakukan hal berikut:

var className = '.'+$('#id').attr('class').split(' ').join('.')

dan kamu akan punya

.myclass.mysubclass

Sekarang jika Anda ingin memilih semua elemen yang memiliki kelas yang sama seperti div di atas:

   var brothers=$('.'+$('#id').attr('class').split(' ').join('.'))

itu berarti

var brothers=$('.myclass.mysubclass')

Perbarui 2018

ATAU dapat diimplementasikan dengan vanilla javascript dalam 2 baris:

  const { classList } = document.querySelector('#id');
  document.querySelectorAll(`.${Array.from(classList).join('.')}`);

Ini untuk membuat kelas kedua menjadi beberapa kelas menggunakan elemen

var class_name = $('#videobuttonChange').attr('class').split(' ')[1];

Anda cukup menggunakan,

var className = $('#id').attr('class');

Jika Anda <div>memiliki id:

​<div id="test" class="my-custom-class"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

...Anda dapat mencoba:

var yourClass = $("#test").prop("class");

Jika Anda <div>hanya memiliki class, Anda dapat mencoba:

var yourClass = $(".my-custom-class").prop("class");

Jika Anda akan menggunakan fungsi pemisahan untuk mengekstrak nama kelas, maka Anda harus mengkompensasi variasi pemformatan potensial yang dapat menghasilkan hasil yang tidak terduga. Sebagai contoh:

" myclass1  myclass2 ".split(' ').join(".")

menghasilkan

".myclass1..myclass2."

Saya pikir Anda lebih baik menggunakan ekspresi reguler untuk mencocokkan pada set karakter yang diizinkan untuk nama kelas. Sebagai contoh:

" myclass1  myclass2  ".match(/[\d\w-_]+/g);

menghasilkan

["myclass1", "myclass2"]

Ekspresi reguler mungkin tidak lengkap, tapi mudah-mudahan Anda mengerti maksud saya. Pendekatan ini mengurangi kemungkinan pemformatan yang buruk.

Untuk menyelesaikan jawaban Whitestock (yang terbaik yang saya temukan) saya lakukan:

className = $(this).attr('class').match(/[\d\w-_]+/g);
className = '.' + className.join(' .');

Jadi untuk "myclass1 myclass2" hasilnya adalah '.myclass1 .myclass2'

Anda bisa mendapatkan Nama kelas dengan dua cara:

var className = $('.myclass').attr('class');

ATAU

var className = $('.myclass').prop('class');

<div id="elem" class="className"></div>

Dengan Javascript

document.getElementById('elem').className;

Dengan jQuery

$('#elem').attr('class');

ATAU

$('#elem').get(0).className;

Jika Anda tidak tahu nama kelas, TETAPI Anda tahu ID, Anda bisa mencoba ini:

<div id="currentST" class="myclass"></div>

Kemudian Sebut saja menggunakan:

alert($('#currentST').attr('class'));

Jika Anda ingin mendapatkan kelas div dan kemudian ingin memeriksa apakah ada kelas maka gunakan sederhana.

if ( $('#div-id' ).hasClass( 'classname' ) ) {
    // do something...
}

misalnya;

if ( $('body').hasClass( 'home' ) ) {
    $('#menu-item-4').addClass('active');
}

Cobalah

HTML

<div class="class_area-1">
    area 1
</div>

<div class="class_area-2">
    area 2
</div>

<div class="class_area-3">
    area 3
</div>

jQuery

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="application/javascript">
    $('div').click(function(){
        alert($(this).attr('class'));
    });
</script>

jika kita memiliki satu atau kita ingin divelemen pertama yang bisa kita gunakan

$('div')[0].classNamekalau tidak kita membutuhkan idelemen itu

Jika kami memiliki kode:

<div id="myDiv" class="myClass myClass2"></div> 

untuk mengambil nama kelas dengan menggunakan jQuery kita dapat mendefinisikan dan menggunakan metode plugin sederhana:

$.fn.class = function(){
  return Array.prototype.slice.call( $(this)[0].classList );
}

atau

 $.fn.class = function(){
   return $(this).prop('class');
 } 

Penggunaan metode ini adalah:

$('#myDiv').class();

Kita harus memperhatikan bahwa ia akan mengembalikan daftar kelas yang tidak seperti elemen metode asli.className yang hanya mengembalikan kelas pertama dari kelas terlampir. Karena seringkali elemen memiliki lebih dari satu kelas yang melekat padanya, saya sarankan Anda untuk tidak menggunakan metode asli ini tetapi elemen.classlist atau metode yang dijelaskan di atas.

Varian pertama akan mengembalikan daftar kelas sebagai array, yang kedua sebagai nama kelas string yang dipisahkan oleh spasi:

// [myClass, myClass2]
// "myClass myClass2"

Pemberitahuan penting lainnya adalah baik metode maupun metode jQuery

$('div').prop('class');

hanya mengembalikan daftar kelas elemen pertama yang ditangkap oleh objek jQuery jika kita menggunakan pemilih yang lebih umum yang menunjukkan banyak elemen lainnya. Dalam kasus seperti itu kita harus menandai elemen, kita ingin mendapatkan kelasnya, dengan menggunakan beberapa indeks, misalnya

$('div:eq(2)').prop('class');

Tergantung juga apa yang perlu Anda lakukan dengan kelas-kelas ini. Jika Anda hanya ingin memeriksa kelas ke daftar kelas elemen dengan id ini, Anda harus menggunakan metode "hasClass":

if($('#myDiv').hasClass('myClass')){
   // do something
}

seperti yang disebutkan dalam komentar di atas. Tetapi jika Anda perlu mengambil semua kelas sebagai pemilih, maka gunakan kode ini:

$.fn.classes = function(){
   var o = $(this);
   return o.prop('class')? [''].concat( o.prop('class').split(' ') ).join('.') : '';
 } 

 var mySelector = $('#myDiv').classes();

Hasilnya adalah:

// .myClass.myClass2

dan Anda bisa mendapatkannya untuk membuat secara dinamis aturan css penulisan ulang tertentu misalnya.

Salam

Ini juga berfungsi.

const $el = $(".myclass");
const className = $el[0].className;

Cara terbaik untuk mendapatkan nama kelas di javascript atau jquery

attr() fungsi atribut digunakan untuk mendapatkan dan mengatur atribut.

Dapatkan Kelas

jQuery('your selector').attr('class');  // Return class

Periksa kelas ada atau tidak

The hasClass() method checks if any of the selected elements have a specified class name.

 if(jQuery('selector').hasClass('abc-class')){
        // Yes Exist
    }else{
        // NOt exists
    }

Tentukan Kelas

jQuery('your selector').attr('class','myclass');  // It will add class to your selector

Dapatkan Kelas di Klik tombol menggunakan jQuery

jQuery(document).on('click','button',function(){
     var myclass = jQuery('#selector').attr('class');
});

Tambahkan kelas jika pemilih tidak memiliki kelas menggunakan jQuery

if ( $('#div-id' ).hasClass( 'classname' ) ) {
        // Add your code
    }

Dapatkan kelas kedua menjadi beberapa kelas menggunakan menjadi elemen

Change array position in place of [1] to get particular class.

var mysecondclass = $('#mydiv').attr('class').split(' ')[1];

gunakan seperti ini: -

$(".myclass").css("color","red");

jika Anda telah menggunakan kelas ini lebih dari sekali maka gunakan setiap operator

$(".myclass").each(function (index, value) {
//do you code
}