Trim 使用普通 JavaScript 来自输入标签范围的小数

Trim decimals from input label span using plain JavaScript

我正在使用一个 wordpress 插件,它生成的代码如下所示:

<div class=" product-addon product-addon-extra-tip">    
  <p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
    <label>
      <input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="2" data-price="2" value="2">  (<span class="amount">.00</span>)</label>
  </p>
  <p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-1">
    <label>
      <input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="5" data-price="5" value="5">  (<span class="amount">.00</span>)</label>
  </p>
</div>

您可以看到 <span> 包含带小数点的美元值。我想 trim 每个实例的小数点和尾随零。

我知道使用 toFixed() 应该可以做到这一点,但我不知道究竟如何才能仅针对那些特定的 <span>。我不能简单地通过 amount 的 class 名称来 select,因为它在别处使用。

因此,我需要在 <div> 和 class product-addon 中使用 class amount 定位 <span>。我需要从那些 <span>s.

中的字符串中删除小数点

所以使用 querySelectorAll 和 select 他们

var spans = document.querySelectorAll("dov.product-addon span.amount");
console.log(spans.length);

并遍历集合。

使用以下 javascript 到 trim 来自 spans 的所有小数和尾随零 div with class product-addon.

var links = document.getElementsByClassName("product-addon");
var span = links[0].getElementsByTagName("span");
console.log(span.length);
for (var i = 0; i < span.length; i++) {
  span[i].innerText = span[i].innerText.split('.')[0];
}
<div class=" product-addon product-addon-extra-tip">
  <p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
    <label>
      <input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="2" data-price="2" value="2"> (<span class="amount">.00</span>)</label>
  </p>
  <p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-1">
    <label>
      <input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="5" data-price="5" value="5"> (<span class="amount">.00</span>)</label>
  </p>
</div>