Jak usunąć klasę, która pasuje do wzorca z atrybutu klasy, ale zachować pozostałe klasy?

Question

Chcę usunąć klas, które kończą się „Blue” z atrybutem klasy na wszystkich tagów

próbka html

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

To da mi wszystkie elementy z klas, które kończą się „niebieski”

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

Jak usunąć te dopasowane nazwy klas z atrybutu class?

Answer 1

Można wyciągnąć całą nazwę klasy się z wyrażenia regularnego tak:

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

Jedną rzeczą, którą należy zdać sobie sprawę, że $('[class$="blue"]') działa na całym atrybut o nazwie class. Nie działa na poszczególnych nazwach klas. Tak, będzie to mecz:

class="happy text_blue" 

Ale to nie pasuje:

class="text_blue happy" 

ponieważ atrybut klasa nie kończą "blue". Jeśli chcesz go dostać dowolną nazwę klasy, która zawiera "blue" niezależnie od tego, gdzie jest umieszczony w atrybucie nazwa klasy, trzeba by użyć:

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

jeśli dalej chce odfiltrować nazw klas, które nie kończą z niebieskim, można to zrobić z JS tak:

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

Jeśli chcesz usunąć te nazwy klasy z obiektów, można zrobić to tak:

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

To może być również wykonane w taki sposób, który wydaje się nieco czystsze, ale nie idealnie oczyścić dodatkowe spacje wokół nazwy klasy to usunięcie:

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

Answer 2

Jeśli zamierzasz robić to bardzo często, możesz chcieć zmienić sposób przypisywania zajęć. Można dokonać HTML tak:

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

a następnie zamiast używać selektora z .text_blue w CSS, użyj .text.blue zamiast. Następnie możesz po prostu usunąć "niebieski" z klas.