Получить элементы по имени класса и изменить имя класса - PullRequest
Новая
       8

Получить элементы по имени класса и изменить имя класса

1 голос
/ 19 марта 2019

У меня есть следующее: 

<div id="elementor-tab-title-1141" class="elementor-tab-title elementor-active"> 
     ...some stuff... 
</div>

Мне нужен код JavaScript, чтобы найти все элементы этого класса и удалить «elementor-active».Поэтому код после запуска JavaScript при загрузке страницы должен выглядеть следующим образом: 

<div id="elementor-tab-title-1141" class="elementor-tab-title"> 
         ...some stuff... 
</div>

Вот что я пробовал: 

function changeClass()
{
    var classNameArray= document.getElementsByClassName("elementor-tab-title elementor-active");

    for(var i = (classNameArray.length - 1); i >= 0; i--)
    {
        classNameArray[i].innerHTML = 
        getClassName(classNameArray[i].innerHTML);
        classNameArray[i].className = "elementor-tab-title";
    }
}

Спасибо!

Ответы [ 2 ]

1 голос
/ 19 марта 2019

Выполните следующие шаги

  • Используйте querySelectorAll(), чтобы получить все элементы с этим class
  • Затем используйте цикл forEach() на всех элементах
  • Используйте classList.remove(), чтобы удалить этот конкретный класс 

[...document.querySelectorAll('elementor-tab-title,.elementor-active')].forEach(x => x.classList.remove('elementor-active'))
console.log(document.body.innerHTML)
<div id="elementor-tab-title-1141" class="elementor-tab-title elementor-active"> 
     ...some stuff... 
</div>

Использование jQuery

Вы можете сделать это немного проще, используя jQuery removeClass()

$('.elementor-tab-title').removeClass('elementor-active');
console.log(document.body.innerHTML)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elementor-tab-title-1141" class="elementor-tab-title elementor-active"> 
     ...some stuff... 
</div>
1 голос
/ 19 марта 2019

Вы можете использовать querySelectorAll() для нацеливания на все элементы, а затем перебрать их, чтобы удалить класс, используя classList.remove() из элемента: 

var elList = [].slice.call(document.querySelectorAll('.elementor-tab-title'));
elList.forEach(function(el){
  el.classList.remove('elementor-active');
});
.elementor-tab-title{
  color: green;
}
.elementor-active{
  color: red;
}
<div id="elementor-tab-title-1141" class="elementor-tab-title elementor-active"> 
     ...some stuff... 
</div>
<div id="elementor-tab-title-1142" class="elementor-tab-title elementor-active"> 
     ...some stuff2... 
</div>
<div id="elementor-tab-title-1143" class="elementor-tab-title elementor-active"> 
     ...some stuff3... 
</div>
...