用相同的名称重命名多个css

Question

我在一个模板化的系统中工作，在这个系统中我可以实现代码，但我不能修改文件的核心。我的层是这样堆叠的：

<div class="layer1">
    <div class="layer2">
        <div class=" layer3">
            <div class="layer4">
            </div>
        </div>
    </div>
</div>
<div class="layer1">
    <div class="layer2">
        <div class=" layer3">
            <div class="layer4">
            </div>
        </div>
    </div>
</div>
<div class="layer1">
    <div class="layer2">
        <div class=" layer3">
            <div class="layer4">
            </div>
        </div>
    </div>
</div>

正如您所看到的，我的类都具有相同的名称(layer1、layer2等)。我想知道是否有办法通过使用Javascript、Jquery或任何其他在线客户端库来修改CSS类名称，例如，第一个layer1变成level1，下面的layer1变成level 2？

谢谢你的回答！

Answer 1

有许多不同的方法可以做到这一点：

解决方案1:

使用addClass()和removeClass()

$(".layer1").removeClass('old_class').addClass('new_class');

用旧类替换old_class，用新类替换new_class

解决方案2:

如果您能够通过ID获取元素

您可以使用.attr()设置类

$("#id").attr('class', 'new_class');

Answer 2

正如其他人已经说过的那样，jQuery实际上做了你想要的事情。

只要你不知道你的“层”的数量，你最好使用find all elements by classname substring

$('*[class^="layer"]')

然后，您可以get the list of the element classes并将旧名称更改为新名称。

Answer 3

使用className的全面解决方案：

 var elem=document.querySelectorAll('[class^="layer"]') ;

 for(i in elem){    
 x = elem[i].className;
 var y=x.replace("layer" , "level");
 elem[i].className=y||x; 
 }