javascript - 如何更改具有指定类的每个 html 元素的值？

Question

我有一个元素列表，每个元素都有一个带有 size 类的 span 元素，我想将它们中的每个元素转换为可读值(字节 => kb、mb 等)我不确定如何更新页面上的这些值。

Codepen: https://codepen.io/x84733/pen/GGGEzx?editors=1010

function formatBytes(bytes,decimals) {
    if(bytes == 0) return '0 Bytes';
    var k = 1024,
        dm = decimals || 2,
        sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
        i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}


var size = document.getElementsByClassName("size");


function updateValue(v){
    size.innerHTML = formatBytes(v);
}


for (var i = 0; i < size.length; i++) {
    updateValue(size.item(i));
}

<ul>
  <li><span class="size">875</span></li>
  <li><span class="size">25984</span></li>
  <li><span class="size">12525125</span></li>
  <li><span class="size">23234</span></li>
  <li><span class="size">325235</span></li>
  <li><span class="size">0</span></li>
  <li><span class="size"></span></li>
</ul>

Answer 1

您要传递给 formatBytes 的内容是span元素，而不是其内容。您还尝试设置 innerHTML上size (这是一个 HTMLCollection)，而不是您传递的元素( v )。相反:

function updateValue(span) {
    span.innerHTML = formatBytes(parseFloat(span.innerHTML));
}

或者您可以使用 textContent 而不是innerHTML .

一些旁注:

• 您可以使用size[i]而不是size.item(i) 。老item功能有点过时。

• 您永远不需要调用 parseFloat关于 / 的结果， / 的结果已经总是一个数字。

• 强烈建议以复数形式命名包含列表、数组、集合等的变量。例如，sizeSpans或类似的，不是size .

• 如果您需要支持 IE8(希望您不需要)，它没有 getElementsByClassName但它确实有querySelectorAll哪个更通用(接受任何有效的 CSS 选择器):var size = document.querySelectorAll(".size") .

• 同样，如果您需要支持 IE8，请注意它没有 textContent .