Перебрать все блоки на странице с одинаковыми классами и обрезать в них содержимое

Question

На странице существует несколько блоков с одинаковыми классами. Надо взять все эти блоки и обрезать в каждом из них содержимое до 14 символов, а после положить обратно уже с обрезанным содержимым.

Собственно, блоки выглядят следующим образом, только на самом сайте их гораздо больше:

<span id="btc-price" class="btc-price cryptocurrency-price">19461.26972173</span>
<span id="eth-price" class="eth-price cryptocurrency-price">1009.1328179263</span>
<span id="usdt-price" class="usdt-price cryptocurrency-price">0.99884622030755</span>
<span id="usdc-price" class="usdc-price cryptocurrency-price">1.0003357800278</span>

Скрипт, который их должен изменять:

<script type="text/javascript">
$(document).ready(function(){
    let cryptoPrice = document.querySelector(".cryptocurrency-price");
    for (let i = 0; i < cryptoPrice.length; i++) {
            let priceInner = cryptoPrice.innerHTML;
            let length = 14;
            let trimmedString = priceInner.substring(0,length);
            console.log(trimmedString);
    }
});
</script>

Пока что я не делал записи в блоки получившегося содержимого, просто пытался вывести результат в консоль, но там пустота.

Никаких ошибок тоже нет. Частями код работает, а всё вместе почему-то нет.

Answer 1

const blocks = document.querySelectorAll('.cryptocurrency-price');

blocks.forEach(item => {
  item.textContent = item.textContent.slice(0, 13);
})

.cryptocurrency-price {
display: block;
}

  <span id="btc-price" class="btc-price cryptocurrency-price">19461.26972173</span>
  <span id="eth-price" class="eth-price cryptocurrency-price">1009.1328179263</span>
  <span id="usdt-price" class="usdt-price cryptocurrency-price">0.99884622030755</span>
  <span id="usdc-price" class="usdc-price cryptocurrency-price">1.0003357800278</span>

Answer 2

Для каждого числа сохраняется 14 числен после запятой:

const blocks = document.querySelectorAll('.cryptocurrency-price');

blocks.forEach(e => {
  e.innerText = (+e.innerText).toFixed(14)
})

.cryptocurrency-price {
  display: grid;
}

<span id="btc-price" class="btc-price cryptocurrency-price">19461.26972173</span>
<span id="eth-price" class="eth-price cryptocurrency-price">1009.1328179263</span>
<span id="usdt-price" class="usdt-price cryptocurrency-price">0.99884622030755</span>
<span id="usdc-price" class="usdc-price cryptocurrency-price">1.0003357800278</span>

Просто у этого метода есть проблема, если длина числа после запятой меньше чем то число которые имеется, то тогда оно заменяется на какое-нибудь другое, если вам это не нужно то тогда вот ещё один вариант, без этой проблемы:

const blocks = document.querySelectorAll('.cryptocurrency-price');

blocks.forEach(e => {
  if(e.innerText.split('.')[1].length > 14) e.innerText = (+e.innerText).toFixed(14)
})

.cryptocurrency-price {
  display: grid;
}

<span id="btc-price" class="btc-price cryptocurrency-price">19461.26972173</span>
<span id="eth-price" class="eth-price cryptocurrency-price">1009.1328179263</span>
<span id="usdt-price" class="usdt-price cryptocurrency-price">0.99884622030755</span>
<span id="usdc-price" class="usdc-price cryptocurrency-price">1.0003357800278</span>

БЛОГ НА HUSL

Перебрать все блоки на странице с одинаковыми классами и обрезать в них содержимое

Ответы (2 шт):