按 class 名称获取元素并更改 class 名称

Question

我有以下内容：

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

我需要一个 JavaScript 代码来查找具有 class 的所有元素，并删除 "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";
    }
}

谢谢！

Answer 1

您可以使用 querySelectorAll() 定位所有元素，然后循环遍历它们以从元素中使用 classList.remove() 删除 class:

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>

Answer 2

按照以下步骤操作

使用 querySelectorAll() 获取具有 class
然后对所有元素使用forEach()循环
使用 classList.remove() 删除特定的 class

[...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>

按 class 名称获取元素并更改 class 名称

Get elements by class name and change class name

javascript

wordpress

elementor