Nhận danh sách lớp cho phần tử với jQuery

Có cách nào trong jQuery để lặp qua hoặc gán cho một mảng tất cả các lớp được gán cho một phần tử không?

Ví dụ.

<div class="Lorem ipsum dolor_spec sit amet">Hello World!</div>

Tôi sẽ tìm kiếm một lớp "đặc biệt" như trong "dolor_spec" ở trên. Tôi biết rằng tôi có thể sử dụng hasClass () nhưng tên lớp thực tế có thể không nhất thiết phải được biết vào thời điểm đó.

Bạn có thể sử dụng document.getElementById('divId').className.split(/\s+/);để giúp bạn có một loạt các tên lớp.

Sau đó, bạn có thể lặp đi lặp lại và tìm thấy một trong những bạn muốn.

var classList = document.getElementById('divId').className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
    if (classList[i] === 'someClass') {
        //do something
    }
}

jQuery không thực sự giúp bạn ở đây ...

var classList = $('#divId').attr('class').split(/\s+/);
$.each(classList, function(index, item) {
    if (item === 'someClass') {
        //do something
    }
});

Tại sao không có ai liệt kê đơn giản.

$(element).attr("class").split(/\s+/);

EDIT: Như @MarkAmery chỉ ra, bạn không thể chỉ .split(' ')vì tên lớp có thể được phân tách bằng bất kỳ loại khoảng trắng nào.

Trên các trình duyệt hỗ trợ, bạn có thể sử dụng thuộc tính của các thành phần DOM classList.

$(element)[0].classList

Nó là một đối tượng giống như mảng liệt kê tất cả các lớp mà phần tử có.

Nếu bạn cần hỗ trợ các phiên bản trình duyệt cũ không hỗ trợ thuộc classListtính, trang MDN được liên kết cũng bao gồm một shim cho nó - mặc dù ngay cả shim sẽ không hoạt động trên các phiên bản Internet Explorer bên dưới IE 8.

Đây là một plugin jQuery sẽ trả về một mảng của tất cả các lớp mà (các) phần tử phù hợp có

;!(function ($) {
    $.fn.classes = function (callback) {
        var classes = [];
        $.each(this, function (i, v) {
            var splitClassName = v.className.split(/\s+/);
            for (var j = 0; j < splitClassName.length; j++) {
                var className = splitClassName[j];
                if (-1 === classes.indexOf(className)) {
                    classes.push(className);
                }
            }
        });
        if ('function' === typeof callback) {
            for (var i in classes) {
                callback(classes[i]);
            }
        }
        return classes;
    };
})(jQuery);

Sử dụng nó như

$('div').classes();

Trong trường hợp của bạn trở về

["Lorem", "ipsum", "dolor_spec", "sit", "amet"]

Bạn cũng có thể truyền một hàm cho phương thức được gọi trên mỗi lớp

$('div').classes(
    function(c) {
        // do something with each class
    }
);

Đây là một jsFiddle tôi thiết lập để trình diễn và kiểm tra http://jsfiddle.net/GD8Qn/8/

Javascript tối thiểu

;!function(e){e.fn.classes=function(t){var n=[];e.each(this,function(e,t){var r=t.className.split(/\s+/);for(var i in r){var s=r[i];if(-1===n.indexOf(s)){n.push(s)}}});if("function"===typeof t){for(var r in n){t(n[r])}}return n}}(jQuery);

Bạn nên thử cái này:

$("selector").prop("classList")

Nó trả về một mảng của tất cả các lớp hiện tại của phần tử.

var classList = $(element).attr('class').split(/\s+/);
$(classList).each(function(index){

     //do something

});

Cập nhật:

Như @Ryan Leonard đã chỉ ra một cách chính xác, câu trả lời của tôi không thực sự khắc phục điểm tôi tự làm ... Bạn cần phải cắt và loại bỏ khoảng trắng kép bằng (ví dụ) string.replace (/ + / g, "") .. Hoặc bạn có thể tách el. ClassName và sau đó xóa các giá trị trống bằng (ví dụ) Array.filter (Boolean).

const classes = element.className.split(' ').filter(Boolean);

hoặc hiện đại hơn

const classes = element.classList;

Cũ:

Với tất cả các câu trả lời đã cho, bạn không bao giờ nên quên người dùng .trim () (hoặc $ .trim ())

Vì các lớp được thêm và xóa, nên có thể có nhiều khoảng trắng giữa chuỗi lớp .. ví dụ: 'class1 class2 class3' ..

Điều này sẽ biến thành ['class1', 'class2', '', '', '', 'class3'] ..

Khi bạn sử dụng trim, tất cả nhiều khoảng trắng sẽ bị xóa ..

$('div').attr('class').split(' ').each(function(cls){ console.log(cls);})

Điều này có thể giúp bạn quá. Tôi đã sử dụng chức năng này để có được các lớp của phần tử con ..

function getClickClicked(){
    var clickedElement=null;
    var classes = null;<--- this is array
    ELEMENT.on("click",function(e){//<-- where element can div,p span, or any id also a class
        clickedElement = $(e.target);
        classes = clickedElement.attr("class").split(" ");
        for(var i = 0; i<classes.length;i++){
            console.log(classes[i]);
        }
        e.preventDefault();
    });
}

Trong trường hợp của bạn, bạn muốn lớp doler_ipsum bạn có thể làm như thế này ngay bây giờ calsses[2];.

Cảm ơn vì điều này - Tôi đã gặp một vấn đề tương tự, vì tôi đang cố gắng lập trình các đối tượng sẽ lập trình các tên lớp phân cấp, mặc dù các tên đó có thể không nhất thiết phải được biết đến theo kịch bản của tôi.

Trong tập lệnh của tôi, tôi muốn một <a>thẻ bật / tắt văn bản trợ giúp bằng cách đưa <a>thẻ [some_class]cộng với lớp togglevà sau đó cung cấp cho nó văn bản trợ giúp cho lớp [some_class]_toggle. Mã này đang tìm thành công các yếu tố liên quan bằng jQuery:

$("a.toggle").toggle(function(){toggleHelp($(this), false);}, function(){toggleHelp($(this), true);});

function toggleHelp(obj, mode){
    var classList = obj.attr('class').split(/\s+/);
    $.each( classList, function(index, item){
    if (item.indexOf("_toggle") > 0) {
       var targetClass = "." + item.replace("_toggle", "");
       if(mode===false){$(targetClass).removeClass("off");}
       else{$(targetClass).addClass("off");}
    }
    });
} 

Thử cái này. Điều này sẽ giúp bạn có tên của tất cả các lớp từ tất cả các yếu tố của tài liệu.

$(document).ready(function() {
var currentHtml="";
$('*').each(function() {
    if ($(this).hasClass('') === false) {
        var class_name = $(this).attr('class');
        if (class_name.match(/\s/g)){
            var newClasses= class_name.split(' ');
            for (var i = 0; i <= newClasses.length - 1; i++) {
                if (currentHtml.indexOf(newClasses[i]) <0) {
                    currentHtml += "."+newClasses[i]+"<br>{<br><br>}<br>"
                }
            }
        }
        else
        {
            if (currentHtml.indexOf(class_name) <0) {
                currentHtml += "."+class_name+"<br>{<br><br>}<br>"
            }
        }
    }
    else
    {
        console.log("none");
    }
});
$("#Test").html(currentHtml);

});

Dưới đây là ví dụ hoạt động: https://jsfiddle.net/raju_sumit/2xu1ujoy/3/

Tôi đã có một vấn đề tương tự, đối với một yếu tố của hình ảnh loại. Tôi cần kiểm tra xem phần tử đó có thuộc một lớp nhất định không. Đầu tiên tôi đã thử với:

$('<img>').hasClass("nameOfMyClass"); 

nhưng tôi nhận được một "chức năng này không có sẵn cho phần tử này".

Sau đó, tôi đã kiểm tra phần tử của mình trên DOM explorer và tôi thấy một thuộc tính rất hay mà tôi có thể sử dụng: className. Nó chứa tên của tất cả các lớp của phần tử của tôi được phân tách bằng khoảng trắng.

$('img').className // it contains "class1 class2 class3"

Một khi bạn nhận được điều này, chỉ cần tách chuỗi như bình thường.

Trong trường hợp của tôi, điều này đã làm việc:

var listOfClassesOfMyElement= $('img').className.split(" ");

Tôi giả sử điều này sẽ hoạt động với các loại yếu tố khác (ngoài img).

Hy vọng nó giúp.

javascript cung cấp một thuộc tính classList cho một phần tử nút trong dom. Đơn giản chỉ cần sử dụng

  element.classList

sẽ trả về một đối tượng của hình thức

  DOMTokenList {0: "class1", 1: "class2", 2: "class3", length: 3, item: function, contains: function, add: function, remove: function…}

Đối tượng có các chức năng như chứa, thêm, xóa mà bạn có thể sử dụng

Hơi muộn một chút, nhưng sử dụng hàm extend () cho phép bạn gọi "hasClass ()" trên bất kỳ phần tử nào, ví dụ:
var hasClass = $('#divId').hasClass('someClass');

(function($) {
$.extend({
    hasClass: new function(className) {
        var classAttr = $J(this).attr('class');
        if (classAttr != null && classAttr != undefined) {
            var classList = classAttr.split(/\s+/);
            for(var ix = 0, len = classList.length;ix < len;ix++) {
                if (className === classList[ix]) {
                    return true;
                }
            }
        }
        return false;
    }
}); })(jQuery);

Câu hỏi là Jquery được thiết kế để làm gì.

$('.dolor_spec').each(function(){ //do stuff

Và tại sao không có ai đưa ra .find () như một câu trả lời?

$('div').find('.dolor_spec').each(function(){
  ..
});

Ngoài ra còn có classList cho các trình duyệt không phải IE:

if element.classList.contains("dolor_spec") {  //do stuff

Ở đây bạn đi, chỉ cần điều chỉnh câu trả lời của readapes để trả về một mảng của tất cả các lớp:

function classList(elem){
   var classList = elem.attr('class').split(/\s+/);
    var classes = new Array(classList.length);
    $.each( classList, function(index, item){
        classes[index] = item;
    });

    return classes;
}

Truyền phần tử jQuery cho hàm, để một cuộc gọi mẫu sẽ là:

var myClasses = classList($('#myElement'));

Tôi biết đây là một câu hỏi cũ nhưng vẫn còn.

<div id="specId" class="Lorem ipsum dolor_spec sit amet">Hello World!</div>

var className=".dolor_spec" //dynamic

Nếu bạn muốn thao tác phần tử

$("#specId"+className).addClass('whatever');

Nếu bạn muốn kiểm tra xem phần tử có lớp không

 $("#specId"+className).length>0

nếu nhiều lớp

//if you want to select ONE of the classes
var classNames = ['.dolor_spec','.test','.test2']
$("#specId"+classNames).addClass('whatever');
$("#specId"+classNames).length>0
//if you want to select all of the classes
var result = {className: ""};
classNames.forEach(function(el){this.className+=el;},result);
var searchedElement= $("#specId"+result.className);
searchedElement.addClass('whatever');
searchedElement.length>0