使用 GetElementsByClassName 删除部分文本

Question

我正在尝试使用以下脚本从我正在处理的页面上的所有价格中删除“.00”。 “.00”由我正在使用的 WP 主题自动内置。

这是我正在使用的脚本：

<script>
window.onload = function() {
    var str = document.getElementsByClassName("hungry-menu-item-price").innerHTML; 
    var res = str.replace(".00", "");
    document.getElementsByClassName("hungry-menu-item-price").innerHTML = res;
}
</script>

价格格式如下：

<h4 class="hungry-menu-item-price">.00</p>

...但它不起作用。我错过了什么？

Answer 1

getElementsByClassName returns a HTMLCollection。您必须对其进行迭代：

var elements = document.getElementsByClassName("hungry-menu-item-price");
for(var i=0; i<elements.length; ++i)
  elements[i].textContent = elements[i].textContent.replace(".00", "");

<p class="hungry-menu-item-price">.00</p>

Answer 2

document.getElementsByClassName() 函数returns 一个节点列表，而不是一个元素

所以它必须是：

document.getElementsByClassName('hungry-menu-item-price')[0].innerHTML

使用 GetElementsByClassName 删除部分文本

Remove portion of text using GetElementsByClassName

javascript

replace

getelementsbyclassname