web-dev-qa-db-ja.com

JQueryを使って要素のクラスリストを取得する

要素に割り当てられているすべてのクラスをループ処理したり、配列に割り当てたりする方法はありますか。

例.

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

上記の "dolor_spec"のように、 "特別な"クラスを探します。私はhasClass（）を使うことができることを知っていますが、実際のクラス名は必ずしもその時点で知られていないかもしれません。

javascriptjqueryhtml
603
Buggabill

あなたはあなたにクラス名の配列を取得するために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
    }
});
676
redsquare

なぜ誰も単純にリストされていないのです。

$(element).attr("class").split(' ');
246
Dreamr OKelly

これは、マッチした要素が持っているすべてのクラスの配列を返す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
    }
);

ここに私がデモンストレーションしてテストするために設定したjsFiddleがあります http://jsfiddle.net/Gd8Qn/8/ /

縮小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);
137
Will

サポートしているブラウザでは、DOM要素の classList propertyを使うことができます。

$(element)[0].classList

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

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

128
Pehmolelu

あなたはこれを試してみるべきです：

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

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

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

     //do something

});
16
Carlisle
$('div').attr('class').split(' ').map(function(cls){ console.log(cls);})
7
alexche8

更新：

@Ryan Leonardが正しく指摘しているように、私の答えは私が自分自身を作ったことのポイントを実際には修正していません。 ..または、el.classNameを分割してから（たとえば）arr.filter（Boolean）を使用して空の値を削除することもできます。

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

もっと現代的

const classes = element.classList;

古い：

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

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

これは['class1'、 'class2'、 ''、 ''、 ''、 'class3']のようになります。

Trimを使用すると、 multiple のスペースはすべて削除されます。

6
DutchKevv

これも助けになるかもしれません。この関数を使って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();
    });
}

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

3
Phoenix

おかげで - 私はプログラム的にオブジェクトを階層的なクラス名に関連付けることを試みているので、私は同じような問題を抱えていました。

私のスクリプトでは、<a>タグに<a>クラスにtoggleのクラスを与え、それにそのヘルプテキストに[some_class]のクラスを与えることによって、[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");}
    }
    });
}
2
Alan L.

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

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

2
Sumit Raju

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のような機能を持っています。

0
Anuj J

イメージ型の要素についても、同様の問題がありました。要素が特定のクラスのものであるかどうかを確認する必要がありました。まず試してみました：

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

しかし、私は「この関数はこの要素には使用できない」というNiceを得ました。

それから私はDOMエクスプローラーで私の要素を調べました、そして私が使うことができるとても素晴らしい属性を見ました：それは私の要素のすべてのクラスの名前を空白で区切って含んでいました。

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

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

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

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

私はこれが他の種類の要素（img以外にも）でうまくいくと思います。

それが役に立てば幸い。

0
eva