如何從類屬性中刪除與類型匹配的類，但保留其他類？

Question

我要刪除與所有標籤從階級屬性「藍色」

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

這會給我所有的元素與具有「藍色」

結尾的類

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

如何從類屬性中彈出這些匹配的類名？

Answer 1

你可以拉全班同學的名字在用正則表達式是這樣的：

，你應該意識到

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

的一件事是$('[class$="blue"]')名爲class整個屬性進行操作。我不對單個類名進行操作。因此，它會匹配：

class="happy text_blue" 

但是，它不會匹配：

class="text_blue happy" 

因爲class屬性不"blue"結束。如果你想讓它變得包含"blue"無論它被放置在類名屬性的任何類名，你將不得不使用：

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

如果進一步想篩選出的類名未結束藍色，你可以做到這一點與JS是這樣的：如果你想從對象中刪除這些類名

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

，你可以做這樣的：

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

它也可以做到這樣，這似乎乾淨了一點，但它並沒有完全清理周圍的類名額外的空格它移除：

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

Answer 2

如果你打算做這麼多，你可能想改變你分配類的方式。你可以讓你的HTML這樣的：

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

，然後，而不是在你的CSS使用.text_blue選擇，使用.text.blue代替。然後，您可以簡單地從類中刪除「藍色」。