Обрезать десятичные дроби из диапазона входных меток, используя простой JavaScript

Question

Я использую плагин 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"> $2 (<span class="amount">$2.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"> $5 (<span class="amount">$5.00</span>)</label>
  </p>
</div>

Вы можете видеть, что <span> содержит значение в долларах с десятичными знаками Я хотел бы обрезать десятичные и конечные нули из каждого экземпляра.

Я знаю, что это должно быть возможно с помощью toFixed(), но я не могу понять, как нацеливаться только на эти конкретные <span>s. Я не могу просто выбрать по имени класса amount потому что он используется в другом месте.

Итак, мне нужно нацелиться на <span>с классом amount внутри <div> с классом product-addon, И мне нужно удалить десятичные дроби из строк внутри этих <span>s.

Answer 1

Используйте следующий JavaScript, чтобы обрезать все десятичные дроби и конечные нули из spans внутри div с классом 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">$2 (<span class="amount">$2.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">$5 (<span class="amount">$5.00</span>)</label>
  </p>
</div>

Answer 2

Так что используйте querySelectorAll и выберите их

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

И цикл по коллекции.