Question

我想在保留其前缀

的同时替换类的后缀

所需的代码应该使所有div变黑。那样：

class = menu-456 AND menu-789应该被替换并成为menu-123
所有div应该是黑色的

HTML：

  <div class="menu-123">black</div>
  <div class="menu-456">green</div>
  <div class="menu-789" >red</div>

CSS：

.menu-123 {
  background: black;
}

.menu-456 {
background: green;
}

.menu-789 {
  background: red;
}

Javascript（Jquery）：

 /* I am not looking for javascript like removeClass nor addClass, 
nor do i want to change the background. 
I wanted to know if it is possible to REPLACE the suffix of a class*/

Answer 1

使用jQuery提供的removeClass()和addClass()函数的组合，如下所示：

$(document).ready(function(){
    $(".menu-456,.menu-789").removeClass("menu-456 menu-789").addClass("menu-123");
});

此代码在加载DOM时运行，其作用如下：

选择所有带有menu-456或menu-789的元素。
它会从这些元素中删除类menu-456和menu-789。
它为元素提供了类menu-123。

<强> FIDDLE

Answer 2

你的jquery JS：

 $(document).ready(function () {
  $('[class^=menu-]').not('.menu-123').removeClass().addClass('menu-123');
});

你可以addClass和removeClass

DEMO

Answer 3

使用jQuery可以轻松更改和搞乱类。请查看.addClass .removeClass 您可以使用Attribute Contains Selector或Attribute Contains Prefix Selector在代码中更加通用和有效。

例如，如果您希望menu-123成为元素上唯一的新类：

$("div[class|='menu']").attr('class', 'menu-123');

或者，如果你想变得聪明：

$("div[class|='menu']").attr('class', function(i, c){
  return c.replace(/(^|\s)menu-\S+/g, 'menu-123');
});

感谢this answer。

替换类的后缀，同时保留其前缀

3 个答案: