代码之家 › 专栏 › 技术社区 › Un1

如何用指定的类更改每个HTML元素的值?

javascript

Un1 · 技术社区 · 6 年前

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

代码笔: 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>

2 回复 | 直到 6 年前

T.J. Crowder 6 年前

formatBytes span innerHTML size v )。相反:

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

textContent 而不是

size[i] size.item(i) .旧的 item
parseFloat / / 总是一个数字。
sizeSpans 或者类似的,不是
如果你需要支持IE8(希望你不支持),它就没有 getElementsByClassName querySelectorAll var size = document.querySelectorAll(".size") .
文本内容

mooga 6 年前

innerHTML

function updateValue(v, i){
     size.item(i).innerHTML = formatBytes(parseFloat(v.innerHTML));
}

        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, i){
            if(v.innerHTML.length > 0){
            size.item(i).innerHTML = formatBytes(parseFloat(v.innerHTML));
}
        }


        for (var i = 0; i < size.length; i++) 
        {
            updateValue(size.item(i), 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>