Düz JavaScript () jQuery kullanarak, orada bir eleman olmadığını görmek için test edebilirsiniziçerirbir sınıf?

Şu anda bunu yapıyorum.:

HTML:

<div id="test" class="class1"></div>

JS:

var test = document.getElementById("test");
var testClass = test.className;
switch(testClass){
    case "class1": test.innerHTML = "I have class1"; break;
    case "class2": test.innerHTML = "I have class2"; break;
    case "class3": test.innerHTML = "I have class3"; break;
    case "class4": test.innerHTML = "I have class4"; break;
    default: test.innerHTML = "";
}

Bu doğru olan bu çıkış, sonuç:

I have class1

Sorun eğer değiştirirsem bu HTML

<div id="test" class="class1 class5"></div>

...artık tam bir eşleşme yok, hiçbir şey ("") varsayılan çıktı. Ama ben hala çıkış <div> I have class1 olmayı hala istiyorumiçerir.class1 sınıf.

indexOf kullanarak doğru, ama biraz oynamak zorunda:

function hasClass(element, cls) {
    return (' '   element.className   ' ').indexOf(' '   cls   ' ') > -1;
}

Aksi ayrıca eğer aradığınız sınıfın başka bir sınıf adı parçasıysa true alacak.

DEMO

bir WordPress kullanmak (aynı) benzer bir yöntem kullanır.

Alternatif olaraksana element.classList destekler .contains yöntemi kullanabilirsiniz: bir tarayıcı ile çalışır

element.classList.contains(cls);

Çapraz tarayıcı uyumluluğu (özellikle IE) için hala hasClass bir işlevi oluşturmak ve test yapmak isteyebilirsiniz.

Bu örnek için geçerli

Bu arada switch deyimi ile çalışmaz, bu kod ile aynı sonucu elde edebiliriz:

var test = document.getElementById("test"),
    classes = ['class1', 'class2', 'class3', 'class4'];

test.innerHTML = "";

for(var i = 0, j = classes.length; i < j; i  ) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have "   classes[i];
        break;
    }
}

Ayrıca daha az gereksiz ;)