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类名，例如，第一层1成为level1而后面的layer1成为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; 
 }

重命名具有相同名称

3 个答案: