替换class's后缀，同时保留其前缀

Replace the class's suffix while preserving its prefix

本文关键字：保留 前缀 后缀 class 替换      更新时间：2023-09-26

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

演示:http://jsbin.com/vozufura/4/edit

所需的代码应该使所有的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*/

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

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

这段代码在加载DOM时运行，它的作用如下:

  1. 选择所有类为menu-456或menu-789的元素。
  2. 从这些元素中移除menu-456和menu-789类。
  3. 它给元素类menu-123。

小提琴

你的jqueryJS: 

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

你可以添加class和removeClass

使用jQuery很容易更改和搞乱类。看看。addclass . removeclass。
您可以使用属性包含选择器或属性包含前缀选择器在代码中更通用和有效。

例如，如果您希望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');
});

感谢这个答案

相关文章：