Rumah  >  Soal Jawab  >  teks badan

javascript - penapisan dan rendering tatasusunan

var data = [{

    label: '分类一',
    value: '0'
}, {
    label: '分类二',
    value: '1'
}, {
    label: '分类三',
    value: '2'
}, {
    label: '分类四',
    value: '3'
}, {
    label: '分类五',
    value: '4'
}, {
    label: '分类六',
    value: '5'
}]

<p class="teks">

<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>

</p>

Sila beritahu saya cara untuk memaparkan nilai label yang sepadan dalam dom berdasarkan nilai dalam data dengan cara yang paling mudah? ? Data tidak pasti, mungkin terdapat lebih daripada sepuluh atau dua puluh di dalamnya

仅有的幸福仅有的幸福2696 hari yang lalu897

membalas semua(4)saya akan balas

  • PHP中文网

    PHP中文网2017-06-26 10:54:24

    Kaedah di atas boleh dilakukan, tetapi ini bersamaan dengan mendaftarkan pembolehubah setiap kali, menambah nod span pada .text setiap kali dan memanipulasi DOM, yang menyebabkan banyak overhed! Saya secara peribadi mengesyorkan menggunakan kaedah berikut.

    var opText= document.querySelector('.text'),var _text="";
    data.forEach(function(item){
        //把每一次遍历的label加上节点,再储存在_text上。
        _text += '<span>'+item.label+'</span>';
    });
    //最后直接把_text赋值到opText.innerHTML上。
    opText.innerHTML=_text ;
    

    balas
    0
  • PHP中文网

    PHP中文网2017-06-26 10:54:24

    var container = document.querySelector('.text')
    data.forEach(function(item){
        var span = document.createElement('span')
        span.innerHTML = item.label
        span.setAttribute('value', item.value)
        container.appendChild(span)
    })

    balas
    0
  • 给我你的怀抱

    给我你的怀抱2017-06-26 10:54:24

    Kaedah di atas semuanya boleh dilaksanakan, tetapi dua kaedah pertama mempunyai kelebihan dan keburukan tersendiri dalam prestasi di bawah Firefox dan Chrome Kini amalan biasa ialah mencipta serpihan dokumen kosong baharu (DocumentFragment).

    const $container = document.querySelector('.text');
    const fragment = document.createDocumentFragment();
    data.map(item => {
        let span = document.createElement("span");
        span.textContent = item;
        fragment.appendChild(span);
    });
    $container.appendChild(fragment);

    balas
    0
  • typecho

    typecho2017-06-26 10:54:24

    var data = [{
        label: '分类一',
        value: '0'
    }, {
        label: '分类二',
        value: '1'
    }]
    
    // 根据value获取dataList中对应的项
    function getLabelByValue(dataList, value) {
      return dataList.find(function (item) {
        return item.value === value // 这里使用的强等,根据情况可选 ==
      })
    }
    
    // 省略DOM操作
    let label = getLabelByValue(data, '0') // 分类一

    balas
    0
  • Batalbalas