Lọc ra các lớp của một phần tử trong jQuery?

Question

Cách hiệu quả nhất để lọc danh sách các lớp trên một phần tử đã cho là gì?

<div class="foo bar"></div> 
<div class="bim bar"></div> 

$("div.bar").click(function(ev) { 
    alert("The non-bar class was:" + ???); 
}); 

Tôi biết tôi có thể viết một vòng lặp đi qua ev.currentTarget.classList nhưng tôi muốn biết nếu có cách nào tốt hơn.

EDIT: Tôi muốn làm rõ rằng tôi muốn cảnh báo cho tôi biết "foo" và "bim". Tôi không muốn thay thế "thanh", tôi chỉ muốn có thể truy cập vào các lớp KHÔNG phải là thanh. Cảm ơn.

Answer 1

Không có jQuery cách để có được điều này, nhưng tôi sẽ làm gì:

$("div.bar").click(function(ev) { 
    var nonBarClasses = (' ' + this.className + ' ').replace(' bar ', ' ').split(/ +/); 

    nonBarClasses.shift(); 
    nonBarClasses.pop(); 

    // nonBarClasses is now an array, with each element a class that isn't `bar` 

    alert("The non-bar class was: " + nonBarClasses.join(" ")); 
}); 

Nhìn thấy nó trong hành động ở đây: http://jsfiddle.net/PpUeX/2

Answer 2

Bạn có thể lấy toàn bộ chuỗi lớp từ nguyên tố này bằng cách sử dụng jQuery.fn.attr() , và sau đó split() nó vào một mảng, mà bạn có thể làm bất cứ điều gì bạn muốn.

$("div.bar").click(function(ev) { 
    var classes = $(this).attr('class').split(' '); // [0:'foo', 1:'bar'] 
}); 

EDIT: Đối với việc cung cấp một "jQuery" hai chiều nhận được tất cả các "bar" lớp học không, bạn có thể làm một tạm thời clone() của phần tử nhấp và removeClass() thanh lớp trước khi bạn làm bất cứ điều gì với nó:

$("div.bar").click(function(ev) { 
    var noBarClasses = $(this) 
    .clone().removeClass('bar') // <-- no more "bar" 
    .attr('class').split(' '); // [0:'foo'] 
});