Sınıf özelliklerinden bir desenle eşleşen bir sınıfı nasıl kaldırırsınız, ancak diğer sınıfları da korur musunuz?

Question

Bütün etiketlere sınıf özniteliğinden 'mavi'

örnek html ile sona sınıfları silmek istediğiniz

<p class="text_blue happy">this is blue text</p> 
<p class="text_red nothappy">this is red text</p> 
<img class="img_blue nothappy" /> 

Bu

'mavi' ile sona sınıfları ile bana tüm öğeleri verecek

$('[class$=blue]'); 

Bu eşleşen sınıf adlarını sınıf özniteliğinden nasıl ayırabilirim?

Answer 1

Böyle bir düzenli ifade ile bütün sınıf adını çekin: farkına varmalıdır

$('[class$="blue"]').each(function() { 
    var clsName = this.className.match(/\w*blue\w*/)[0]; 
}); 

bir şey $('[class$="blue"]')class adlı tamamı özniteliği çalışır olmasıdır. Tek tek sınıf isimleri üzerinde çalışmıyorum. o Eşleşmeyecek,

class="happy text_blue" 

Ama: Yani, maç olacak class özelliğinin "blue" ile bitmiyor

class="text_blue happy" 

çünkü. Eğer daha fazla sınıf isimleri sona ermedi filtrelemek istese

$('[class*="blue"]').each(function() { 
    var clsName = this.className.match(/\w*blue\w*/)[0]; 
}); 

: Eğer buna sınıf adı özelliğinde konumlandırılmış nerede olursa olsun "blue" içeren herhangi sınıf adını almak istiyorsanız, kullanmak zorunda kalacak mavi ile, böyle JS ile bunu yapabilir:

$('[class*="blue"]').each(function() { 
    var match = this.className.match(/\w*blue(\b|$)/); 
    if (match) { 
     var clsName = match[0]; 
    } 
}); 

Eğer nesnelerden bu sınıf isimleri kaldırmak istiyorsanız, bunu şöyle yapabiliriz:

$('[class*="blue"]').each(function() { 
    var match = this.className.match(/\w*blue(\b|$)/); 
    if (match) { 
     $(this).removeClass(match[0]); 
    } 
}); 

Biraz da temizleyici gibi görünüyor bu şekilde yapılabilir, ama mükemmel o kaldırılan sınıf adı etrafında ekstra boşluğa temizlemek değildir: Ben alışmıştı

$('[class*="blue"]').each(function() { 
    this.className = this.className.replace(/\w*blue(\b|$)/, "").replace(/\s+/g, ' '); 
}); 

Answer 2

Eğer bunu çok yapacaksanız, sınıfları nasıl atadığınızı değiştirmek isteyebilirsiniz.

<p class="text blue happy">this is blue text</p> 

ve sonra yerine CSS'nizde .text_blue bir seçici kullanmak yerine, yerine .text.blue kullanın: Böyle HTML'nizi yapabilirsiniz. Daha sonra sınıflardan "mavi" yi kaldırabilirsiniz.