jQueryで要素のクラスリストを取得する

jQueryで要素に割り当てられているすべてのクラスをループするか、配列に割り当てる方法はありますか？

例：

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

上記の「dolor_spec」のような「特別な」クラスを探します。hasClass（）を使用できることはわかっていますが、実際のクラス名は必ずしもその時点でわかっているとは限りません。

document.getElementById('divId').className.split(/\s+/);クラス名の配列を取得するために使用できます。

次に、反復して、必要なものを見つけることができます。

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

jQueryは実際にはここでは役に立ちません...

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

なぜ誰も単純にリストしていません。

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

編集：@MarkAmeryが指摘しているように、.split(' ')クラス名をあらゆる種類の空白で区切ることができるからといって、それを行うことはできません。

サポートするブラウザでは、DOM要素のclassListプロパティを使用できます。

$(element)[0].classList

これは、要素が持つすべてのクラスをリストする配列のようなオブジェクトです。

classListプロパティをサポートしていない古いバージョンのブラウザーをサポートする必要がある場合、リンクされたMDNページにもそのシムが含まれます。ただし、シムでさえIE 8より前のInternet Explorerバージョンでは機能しません。

これは、一致した要素が持つすべてのクラスの配列を返すjQueryプラグインです

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

好きに使う

$('div').classes();

あなたの場合には戻ります

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

各クラスで呼び出されるメソッドに関数を渡すこともできます

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

これは、http： //jsfiddle.net/GD8Qn/8/をデモンストレーションおよびテストするために設定したjsFiddleです。

縮小Javascript

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

あなたはこれを試すべきです：

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

要素の現在のすべてのクラスの配列を返します。

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

     //do something

});

更新：

@Ryan Leonardが正しく指摘したように、私の答えは私が自分で作ったポイントを実際には修正しません...（たとえば）string.replace（/ + / g、 ""）でダブルスペースをトリミングして削除する必要があります..または、el.classNameを分割し、（たとえば）arr.filter（Boolean）を使用して空の値を削除することもできます。

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

またはより現代的な

const classes = element.classList;

古い：

与えられたすべての答えで、ユーザー.trim（）（または$ .trim（））を忘れないでください

クラスは追加および削除されるため、クラス文字列の間に複数のスペースがある場合があります。例： 'class1 class2 class3' ..

これは['class1'、 'class2'、 ''、 ''、 ''、 'class3']に変わります。

トリムを使用すると、複数のスペースがすべて削除されます。

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

これも役立つかもしれません。この関数を使用して、子要素のクラスを取得しました。

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

あなたの場合、あなたはdoler_ipsumクラスが欲しいのですがuは今このようにすることができますcalsses[2];。

これをありがとう-私は同様の問題を抱えていました。プログラムでオブジェクトを階層的なクラス名に関連付けようとしているためです。ただし、それらの名前は必ずしもスクリプトで認識されているとは限りません。

スクリプトでは<a>、<a>タグ[some_class]にのクラスとのクラスをtoggle与え、ヘルプテキストにのクラスを与えることで、タグがヘルプテキストをオン/オフにしたいと思っています[some_class]_toggle。このコードは、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");}
    }
    });
} 

これを試して。これにより、ドキュメントのすべての要素からすべてのクラスの名前が取得されます。

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

}）;

これが実際の例です：https : //jsfiddle.net/raju_sumit/2xu1ujoy/3/

画像タイプの要素についても、同様の問題がありました。要素が特定のクラスかどうかを確認する必要がありました。最初に私が試した：

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

しかし、「この機能はこの要素では利用できません」という素晴らしい情報を得ました。

次に、DOMエクスプローラーで自分の要素を調べたところ、使用できる非常に優れた属性であるclassNameが見つかりました。空白で区切られた私の要素のすべてのクラスの名前が含まれていました。

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

これを取得したら、通常どおりに文字列を分割します。

私の場合、これはうまくいきました：

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

これは他の種類の要素（img以外）でも機能すると想定しています。

それが役に立てば幸い。

javascriptは、domのノード要素にclassList属性を提供します。単に使用する

  element.classList

フォームのオブジェクトを返します

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

オブジェクトには、contains、add、removeなどの関数があり、使用できます

少し遅れますが、extend（）関数を使用すると、任意の要素で "hasClass（）"を呼び出すことができます。例：
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);

問題は、Jqueryが何をするように設計されているかです。

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

そして、なぜ誰も.find（）を答えにしないのですか？

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

IE以外のブラウザのclassListもあります。

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

これで、すべてのクラスの配列を返すようにreadquareの答えを調整しました。

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

サンプルの呼び出しが次のようになるように、jQuery要素を関数に渡します。

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

これは古い質問ですが、それでもわかります。

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

var className=".dolor_spec" //dynamic

要素を操作したい場合

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

要素にクラスがあるかどうかを確認したい場合

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

複数のクラスの場合

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