Tôi muốn lấy tên lớp bằng jQuery

Và nếu nó có id

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

Sau khi nhận được phần tử là đối tượng jQuery thông qua các phương tiện khác ngoài lớp của nó, sau đó

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

nên làm thủ thuật. Đối với việc sử dụng ID .attr('id').

Nếu bạn đang ở trong một trình xử lý sự kiện hoặc phương thức jQuery khác, trong đó phần tử là nút DOM thuần không có trình bao bọc, bạn có thể sử dụng:

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

Cả hai đều là các phương thức DOM tiêu chuẩn và được hỗ trợ tốt trong tất cả các trình duyệt.

Nó là tốt hơn để sử dụng .hasClass()khi bạn muốn kiểm tra nếu một yếu tố có một cụ thể class. Điều này là do khi một phần tử có nhiều classthì việc kiểm tra là không quan trọng.

Thí dụ:

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

Ở đâu:

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

Với .hasClass()chúng tôi có thể kiểm tra nếu divcó lớp divhover.

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

Hãy cẩn thận, Có lẽ, bạn có một lớp và một lớp con.

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

Nếu bạn sử dụng các giải pháp trước đó, bạn sẽ có:

myclass mysubclass

Vì vậy, nếu bạn muốn có bộ chọn lớp , hãy làm như sau:

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

và bạn sẽ có

.myclass.mysubclass

Bây giờ nếu bạn muốn chọn tất cả các phần tử có cùng một lớp, chẳng hạn như div ở trên:

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

Điều đó có nghĩa là

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

Cập nhật 2018

HOẶC có thể được thực hiện với javilla javascript trong 2 dòng:

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

Điều này là để đưa lớp thứ hai thành nhiều lớp sử dụng thành một phần tử

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

bạn chỉ có thể sử dụng,

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

Nếu bạn <div>có một id:

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

...bạn co thể thử:

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

Nếu bạn <div>chỉ có một class, bạn có thể thử:

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

Nếu bạn sẽ sử dụng hàm phân tách để trích xuất tên lớp, thì bạn sẽ phải bù cho các biến thể định dạng tiềm năng có thể tạo ra kết quả không mong muốn. Ví dụ:

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

sản xuất

".myclass1..myclass2."

Tôi nghĩ rằng bạn nên sử dụng một biểu thức chính quy để khớp với tập hợp các ký tự được phép cho tên lớp. Ví dụ:

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

sản xuất

["myclass1", "myclass2"]

Biểu thức chính quy có thể không đầy đủ, nhưng hy vọng bạn hiểu quan điểm của tôi. Cách tiếp cận này giảm thiểu khả năng định dạng kém.

Để hoàn thành câu trả lời của Whit Breed (đó là câu trả lời hay nhất tôi tìm thấy) tôi đã làm:

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

Vì vậy, đối với "mygroup1 mygroup2" , kết quả sẽ là '.myclass1 .myclass2'

Bạn có thể lấy Tên lớp theo hai cách:

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

HOẶC LÀ

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

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

Với Javascript

document.getElementById('elem').className;

Với jQuery

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

HOẶC LÀ

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

Nếu bạn không biết tên lớp NHƯNG bạn biết ID bạn có thể thử điều này:

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

Sau đó gọi nó bằng cách sử dụng:

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

Nếu bạn muốn lấy các lớp div và sau đó muốn kiểm tra xem có lớp nào tồn tại không thì sử dụng đơn giản.

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

ví dụ;

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

Thử nó

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>

nếu chúng tôi có một hoặc chúng tôi muốn divyếu tố đầu tiên, chúng tôi có thể sử dụng

$('div')[0].classNamenếu không, chúng ta cần một idyếu tố đó

Nếu chúng ta có một mã:

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

để lấy tên lớp bằng cách sử dụng jQuery, chúng ta có thể định nghĩa và sử dụng một phương thức plugin đơn giản:

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

hoặc là

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

Việc sử dụng phương pháp sẽ là:

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

Chúng ta phải lưu ý rằng nó sẽ trả về một danh sách các lớp không giống như phần tử phương thức gốc. ClassName chỉ trả về lớp đầu tiên của các lớp đính kèm. Bởi vì phần tử thường có nhiều hơn một lớp được đính kèm, tôi khuyên bạn không nên sử dụng phương thức gốc này mà là phần tử. Classlist hoặc phương thức được mô tả ở trên.

Biến thể đầu tiên của nó sẽ trả về một danh sách các lớp dưới dạng một mảng, thứ hai là một chuỗi - các tên lớp được phân tách bằng dấu cách:

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

Một thông báo quan trọng khác là cả hai phương thức cũng như phương thức jQuery

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

chỉ trả về danh sách lớp của phần tử đầu tiên được bắt bởi đối tượng jQuery nếu chúng ta sử dụng bộ chọn phổ biến hơn để chỉ ra nhiều phần tử khác. Trong trường hợp như vậy, chúng ta phải đánh dấu phần tử, chúng ta muốn lấy các lớp của anh ta, bằng cách sử dụng một số chỉ mục, ví dụ:

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

Nó cũng phụ thuộc vào những gì bạn cần làm với các lớp này. Nếu bạn chỉ muốn kiểm tra một lớp vào danh sách lớp của phần tử có id này, bạn chỉ nên sử dụng phương thức "hasClass":

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

như đã đề cập trong các ý kiến ​​trên. Nhưng nếu bạn có thể cần phải lấy tất cả các lớp làm bộ chọn, thì hãy sử dụng mã này:

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

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

Kết quả sẽ là:

// .myClass.myClass2

và bạn có thể lấy nó để tạo động một quy tắc css viết lại cụ thể chẳng hạn.

Trân trọng

Điều này làm việc quá.

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

Cách tốt nhất để có được tên lớp trong javascript hoặc jquery

attr() chức năng thuộc tính được sử dụng để có được và thiết lập thuộc tính.

Nhận lớp

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

Kiểm tra lớp có tồn tại hay không

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
    }

Đặt lớp

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

Nhận Class trên Click of button bằng jQuery

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

Thêm lớp nếu bộ chọn không có lớp nào sử dụng jQuery

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

Nhận lớp thứ hai thành nhiều lớp sử dụng thành một phần tử

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

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

sử dụng như thế này: -

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

nếu bạn đã sử dụng lớp này nhiều lần thì hãy sử dụng mỗi toán tử

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