Dapatkan daftar kelas untuk elemen dengan jQuery

Apakah ada cara di jQuery untuk mengulang atau menetapkan ke array semua kelas yang ditugaskan ke suatu elemen?

ex.

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

Saya akan mencari kelas "khusus" seperti pada "dolor_spec" di atas. Saya tahu bahwa saya bisa menggunakan hasClass () tetapi nama kelas yang sebenarnya mungkin belum diketahui pada saat itu.

Anda dapat menggunakan document.getElementById('divId').className.split(/\s+/);untuk memberi Anda array nama kelas.

Kemudian Anda dapat beralih dan menemukan yang Anda inginkan.

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

jQuery tidak benar-benar membantu Anda di sini ...

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

Mengapa tidak ada yang terdaftar.

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

EDIT: Seperti yang ditunjukkan oleh @MarkAmery, Anda tidak bisa hanya .split(' ')karena nama kelas dapat dipisahkan oleh segala jenis spasi putih.

Pada browser pendukung, Anda dapat menggunakan classListproperti elemen DOM .

$(element)[0].classList

Ini adalah objek mirip array yang mencantumkan semua kelas yang dimiliki elemen.

Jika Anda perlu mendukung versi browser lama yang tidak mendukung classListproperti, halaman MDN tertaut juga menyertakan shim untuk itu - meskipun bahkan shim tidak akan bekerja pada versi Internet Explorer di bawah IE 8.

Ini adalah plugin jQuery yang akan mengembalikan array dari semua kelas yang dimiliki elemen yang cocok

;!(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);

Gunakan seperti

$('div').classes();

Dalam kasus Anda kembali

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

Anda juga dapat melewatkan fungsi ke metode yang akan dipanggil pada setiap kelas

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

Ini adalah jsFiddle yang saya atur untuk menunjukkan dan menguji http://jsfiddle.net/GD8Qn/8/

Javascript yang diperkecil

;!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);

Anda harus mencoba yang ini:

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

Ini mengembalikan array dari semua kelas elemen saat ini.

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

     //do something

});

Memperbarui:

Seperti yang ditunjukkan oleh @Ryan Leonard dengan benar, jawaban saya tidak benar-benar memperbaiki poin yang saya buat sendiri ... Anda harus memotong dan menghapus spasi ganda dengan (misalnya) string.replace (/ + / g, "") .. Atau Anda dapat memisahkan el.className dan kemudian menghapus nilai kosong dengan (misalnya) arr.filter (Boolean).

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

atau lebih modern

const classes = element.classList;

Tua:

Dengan semua jawaban yang diberikan, Anda tidak boleh lupa untuk pengguna .trim () (atau $ .trim ())

Karena kelas ditambahkan dan dihapus, dapat terjadi bahwa ada beberapa spasi di antara string kelas .. misalnya 'class1 class2 class3' ..

Ini akan berubah menjadi ['class1', 'class2', '', '', '', 'class3'] ..

Saat Anda menggunakan trim, semua banyak ruang dihapus ..

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

Mungkin ini dapat membantu Anda juga. Saya telah menggunakan fungsi ini untuk mendapatkan kelas elemen childern ..

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();
    });
}

Dalam kasus Anda, Anda ingin kelas doler_ipsum yang dapat Anda lakukan seperti ini sekarang calsses[2];.

Terima kasih untuk ini - saya mengalami masalah yang sama, karena saya mencoba menghubungkan objek secara terprogram akan nama-nama kelas hierarkis, meskipun nama-nama itu mungkin tidak diketahui oleh skrip saya.

Dalam skrip saya, saya ingin <a>tag untuk mengaktifkan / menonaktifkan teks bantuan dengan memberikan <a>tag [some_class]plus kelasnya toggle, dan kemudian memberikan teks bantuannya kelas [some_class]_toggle. Kode ini berhasil menemukan elemen terkait menggunakan 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");}
    }
    });
} 

Coba ini. Ini akan memberi Anda nama semua kelas dari semua elemen dokumen.

$(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);

});

Berikut ini contoh kerjanya: https://jsfiddle.net/raju_sumit/2xu1ujoy/3/

Saya punya masalah serupa, untuk elemen tipe gambar. Saya perlu memeriksa apakah elemen itu dari kelas tertentu. Pertama saya mencoba dengan:

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

tapi saya mendapat "fungsi ini tidak tersedia untuk elemen ini".

Kemudian saya memeriksa elemen saya di DOM explorer dan saya melihat atribut yang sangat bagus yang bisa saya gunakan: className. Isinya nama semua kelas elemen saya yang dipisahkan oleh spasi kosong.

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

Setelah Anda mendapatkannya, cukup pisahkan string seperti biasa.

Dalam kasus saya ini berhasil:

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

Saya berasumsi ini akan bekerja dengan jenis elemen lain (selain img).

Semoga ini bisa membantu.

javascript menyediakan atribut classList untuk elemen simpul di dom. Cukup menggunakan

  element.classList

akan mengembalikan objek bentuk

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

Objek memiliki fungsi seperti berisi, menambah, menghapus yang dapat Anda gunakan

Agak terlambat, tetapi menggunakan fungsi extended () memungkinkan Anda memanggil "hasClass ()" pada elemen apa pun, misalnya:
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);

Pertanyaannya adalah apa yang dirancang untuk dilakukan Jquery.

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

Dan mengapa tidak ada yang memberikan .find () sebagai jawaban?

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

Ada juga classList untuk browser non-IE:

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

Ini dia, hanya tweak jawaban readsquare untuk mengembalikan array semua kelas:

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;
}

Lewati elemen jQuery ke fungsi, sehingga panggilan sampel adalah:

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

Saya tahu ini adalah pertanyaan lama tapi tetap saja.

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

var className=".dolor_spec" //dynamic

Jika Anda ingin memanipulasi elemen

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

Jika Anda ingin memeriksa apakah elemen memiliki kelas

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

jika banyak kelas

//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