javascript - 按类名获取元素并更改类名

Question

我有以下内容:

<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";
    }
}

谢谢!

Answer 1

按照以下步骤操作

• 使用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>