Переименовать несколько 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, так что, например, первый уровень1 станет level1, а следующий уровень1 станет уровнем 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; 
}