問(wèn)題描述

var data = [{

label: ’分類(lèi)一’, value: ’0’}, { label: ’分類(lèi)二’, value: ’1’}, { label: ’分類(lèi)三’, value: ’2’}, { label: ’分類(lèi)四’, value: ’3’}, { label: ’分類(lèi)五’, value: ’4’}, { label: ’分類(lèi)六’, value: ’5’}]

<p class='text'>

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

</p>

求教，請(qǐng)問(wèn)如何能夠最簡(jiǎn)單的根據(jù)數(shù)據(jù)里的value值在 dom 里渲染出相應(yīng)的label值？？數(shù)據(jù)是不定的，可能里面會(huì)有十幾二十個(gè)

問(wèn)題解答

樓上的的方式可以做到，但是這樣就相當(dāng)于每次都生命一個(gè)變量，每一次都往.text里面添加了span節(jié)點(diǎn)，操作了DOM，造成很大的開(kāi)銷(xiāo)！我個(gè)人建議用下面這個(gè)方式。

var opText= document.querySelector(’.text’),var _text='';data.forEach(function(item){ //把每一次遍歷的label加上節(jié)點(diǎn)，再儲(chǔ)存在_text上。 _text += ’<span>’+item.label+’</span>’;});//最后直接把_text賦值到opText.innerHTML上。opText.innerHTML=_text ;回答2：

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)})回答3：

樓上的方法都是可行的，不過(guò)前兩中方法在火狐跟chrome下的性能各有優(yōu)缺點(diǎn)，現(xiàn)在普遍做法上通過(guò)創(chuàng)建一個(gè)新的空白的文檔片段( 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);回答4：

var data = [{ label: ’分類(lèi)一’, value: ’0’}, { label: ’分類(lèi)二’, value: ’1’}]// 根據(jù)value獲取dataList中對(duì)應(yīng)的項(xiàng)function getLabelByValue(dataList, value) { return dataList.find(function (item) { return item.value === value // 這里使用的強(qiáng)等，根據(jù)情況可選 == })}// 省略DOM操作let label = getLabelByValue(data, ’0’) // 分類(lèi)一