javascript - 數組的過濾和渲染
問題描述
var data = [{
label: ’分類一’, value: ’0’}, { label: ’分類二’, value: ’1’}, { label: ’分類三’, value: ’2’}, { label: ’分類四’, value: ’3’}, { label: ’分類五’, value: ’4’}, { label: ’分類六’, value: ’5’}]
<p class='text'>
<span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</p>
求教,請問如何能夠最簡單的根據數據里的value值在 dom 里渲染出相應的label值??數據是不定的,可能里面會有十幾二十個
問題解答
回答1:樓上的的方式可以做到,但是這樣就相當于每次都生命一個變量,每一次都往.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 ;回答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:
樓上的方法都是可行的,不過前兩中方法在火狐跟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);回答4:
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’) // 分類一
相關文章:
1. javascript - 按鈕鏈接到另一個網址 怎么通過百度統計計算按鈕的點擊數量2. sql語句 - 如何在mysql中批量添加用戶?3. mysql 可以從 TCP 連接但是不能從 socket 鏈接4. mysql - PHP定時通知、按時發布怎么做?5. 怎么php怎么通過數組顯示sql查詢結果呢,查詢結果有多條,如圖。6. mysql - JAVA怎么實現一個DAO同時實現查詢兩個實體類的結果集7. 事務 - mysql共享鎖lock in share mode的實際使用場景8. mysql建表索引問題求助9. mysql - 數據庫建字段,默認值空和empty string有什么區別 11010. mysql 非主鍵做范圍查找實現原理的一點困惑
