jquery - 如何检查CSS类中是否存在子字符串并将其删除？

我们有几个具有以下模式的CSS类。它们都以bg--或color--开头。如何使用jQuery检查元素是否包含CSS类子字符串，如果找到，则将其删除？

例子：


bg--white
bg--red
bg--orange
color--orange
color--red
color--purple


我尝试了什么

$(function() {
  var divEl = $('div');
  if(divEl.hasClass('*=bkg--') {
    divEl.removeClass('*=bkg--');
  }
  if(divEl.hasClass('*=color--') {
    divEl.removeClass('*=color--');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bkg--red color--white">Holisticly build resource sucking methodologies before distributed methodologies. </div>
<div class="bkg--orange color--white">Phosfluorescently integrate revolutionary collaboration and idea-sharing through efficient services.</div>
<div class="bkg--purple color--purple">Credibly maximize impactful e-tailers with resource-leveling convergence. </div>

最佳答案

您可以访问所需的.prop()（在您的情况下为"class"），并使用JS的String.prototype.replace()快速更改它

$("div").prop("class", function( i, cls ) {

  console.log("Before: "+ cls )
  cls = cls.replace(/(^|\s)(bg|color)--\S+/g, '');
  console.log("After: "+ cls )

  return cls;
});

.bg--white {background: white;}
.bg--red {background: red;}
.bg--orange {background: orange;}
.color--orange {color: orange;}
.color--red {color: red;}
.color--purple {color: purple;}

<div class="test bg--red color--white">Holisticly</div>
<div class="foo--bar bg--orange color--white">Phosfluorescently</div>
<div class="bg--purple color--purple">Credibly</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

或者简单地：

$("div").prop("class", function( i, cls ) {
  return cls.replace(/(^|\s)(bg|color)--\S+/g, '');
});

或者，如果您使用JS编译器（例如Babel.js）

$("div").prop("class", (i, c) => c.replace(/(^|\s)(bg|color)--\S+/g, ''));

此外，不必使用过于笼统的$("div")，而是可以将选择器更改为：

$("[class^='bg--'], [class*=' bg--'], [class^='color--'], [class*=' color--']")

它有点长，但是可以很好地完成工作。

关于jquery - 如何检查CSS类中是否存在子字符串并将其删除？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51713729/