javascript - 数组的过滤和渲染-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 数组的过滤和渲染

仅有的幸福 2017-06-26 10:52:24

[JavaScript讨论组]

1437

var data = [{

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

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

</p>

求教，请问如何能够最简单的根据数据里的value值在 dom 里渲染出相应的label值？？数据是不定的，可能里面会有十几二十个

仅有的幸福

全部回复(4)

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

楼上的的方式可以做到，但是这样就相当于每次都生命一个变量，每一次都往.text里面添加了span节点，操作了DOM，造成很大的开销！我个人建议用下面这个方式。

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

赞 +0

添加回复

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

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)
})

赞 +0

添加回复

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

楼上的方法都是可行的，不过前两中方法在火狐跟chrome下的性能各有优缺点，现在普遍做法上通过创建一个新的空白的文档片段( 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);

赞 +0

添加回复

typecho2017-06-26 10:54:24 1楼

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') // 分类一

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>