Xác định xem một phần tử có lớp CSS với jQuery không

Tôi đang làm việc với jQuery và đang tìm xem có cách nào dễ dàng để xác định xem phần tử đó có một lớp CSS cụ thể được liên kết với nó không.

Tôi có id của phần tử và lớp CSS mà tôi đang tìm kiếm. Tôi chỉ cần có thể, trong một câu lệnh if, thực hiện một phép so sánh dựa trên sự tồn tại của lớp đó trên phần tử.

Sử dụng hasClassphương pháp:

jQueryCollection.hasClass(className);

hoặc là

$(selector).hasClass(className);

Đối số là (rõ ràng) một chuỗi đại diện cho lớp bạn đang kiểm tra và nó trả về một boolean (vì vậy nó không hỗ trợ chuỗi như hầu hết các phương thức jQuery).

Lưu ý: Nếu bạn vượt qua một classNameđối số có khoảng trắng, nó sẽ được khớp theo nghĩa đen với classNamechuỗi các phần tử của bộ sưu tập . Vì vậy, nếu, ví dụ, bạn có một yếu tố,

<span class="foo bar" />

sau đó điều này sẽ trở lại true:

$('span').hasClass('foo bar')

và những thứ này sẽ trở lại false:

$('span').hasClass('bar foo')
$('span').hasClass('foo  bar')

từ FAQ

elem = $("#elemid");
if (elem.is (".class")) {
   // whatever
}

hoặc là:

elem = $("#elemid");
if (elem.hasClass ("class")) {
   // whatever
}

Về phần phủ định, nếu bạn muốn biết nếu một phần tử không có lớp, bạn có thể chỉ cần làm như Mark đã nói.

if (!currentPage.parent().hasClass('home')) { do what you want }

Không có jQuery:

var hasclass=!!(' '+elem.className+' ').indexOf(' check_class ')+1;

Hoặc là:

function hasClass(e,c){
    return e&&(e instanceof HTMLElement)&&!!((' '+e.className+' ').indexOf(' '+c+' ')+1);
}
/*example of usage*/
var has_class_medium=hasClass(document.getElementsByTagName('input')[0],'medium');

Đây là CÁCH nhanh hơn jQuery!

Để giúp bất cứ ai đến đây nhưng thực sự đang tìm kiếm một cách miễn phí của jQuery để làm điều này:

element.classList.contains('your-class-name')

Kiểm tra trang Câu hỏi thường gặp về jQuery chính thức:

Làm cách nào để kiểm tra xem một phần tử có lớp vuông góc hay không

 $('.segment-name').click(function () {
    if($(this).hasClass('segment-a')){
        //class exist
    }
});

Trong trường hợp của tôi, tôi đã sử dụng hàm 'là' một hàm jQuery, tôi đã có một phần tử HTML với các lớp css khác nhau được thêm vào, tôi đang tìm một lớp cụ thể ở giữa chúng, vì vậy tôi đã sử dụng "là" một cách thay thế tốt để kiểm tra một lớp được thêm động vào một phần tử html, vốn đã có các lớp css khác, nó là một lựa chọn tốt khác.

ví dụ đơn giản:

 <!--element html-->
 <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>

 <!--jQuery "is"-->
 $('#menu').is('.cbp-spmenu-open');

ví dụ nâng cao:

 <!--element html-->
    <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>

   <!--jQuery "is"-->
    if($('#menu').is('.cbp-spmenu-bottom.cbp-spmenu-open')){
       $("#menu").show();
    }