首頁猿問 js 單一有序數據結構...

js 單一有序數據結構如何在頁面在生成雙層有序的列表

JavaScript

慕桂英3389331 2019-03-21 18:19:10

有如下數據：{ "data": [ { "title": "標題1", "link": "", "date": "2018-6-26", "views": 153, "info": "簡述簡述簡述簡述簡述簡述簡述" }, { "title": "標題2", "link": "", "date": "2018-6-25", "views": 460, "info": "簡述簡述簡述簡述簡述簡述簡述" }, { "title": "標題3", "link": "", "date": "2018-6-24", "views": 392, "info": "簡述簡述簡述簡述簡述簡述簡述" }, { "title": "標題4", "link": "", "date": "2018-6-23, "views": 318, "info": "簡述簡述簡述簡述簡述簡述簡述" }, { "title": "標題5", "link": "", "date": "2018-6-22", "views": 241, "info": "簡述簡述簡述簡述簡述簡述簡述" }, { "title": "標題6", "link": "", "date": "2018-6-21", "views": 283, "info": "簡述簡述簡述簡述簡述簡述簡述" }, { "title": "標題7", "link": "", "date": "2018-6-20", "views": 216, "info": "簡述簡述簡述簡述簡述簡述簡述" } ]}html結構如下<ul> <li> <div>1</div> <div>2</div> </li> <li> <div>3</div> <div>4</div> </li> <li> <div>5</div> <div>6</div> </li> <li> <div>7</div> <div>8</div> </li></ul>請問js如何用如上數據循環生成這樣的有序html結構？

查看完整描述

3 回答

一只斗牛犬

TA貢獻1784條經驗獲得超2個贊

let html = ''

for(let i = 0;i < data.length;i++) {

let div = `<div>${data[i].title}</div>`

html += i % 2 === 0 ? `<li>` + div : div + `</li>`

}

if (data.length % 2 === 1) {

html += `</li>`

}

html = `<ul>${html}</ul>

反對回復 2019-04-09

白豬掌柜的

TA貢獻1893條經驗獲得超10個贊

var html = ''

for(let i=0;i<a.data.length;i++){

var _html = ''

for(let o in a.data[i]){

_html+=`<div>${a.data[i][o]}</div>`

}

html+='<li>'+_html+'</li>'

}

document.getElementById("app").innerHTML = '<ul>'+html+'</ul>'

反對回復 2019-04-09

素胚勾勒不出你

TA貢獻1827條經驗獲得超9個贊

let fragment = document.createDocumentFragment();

let ulNode = document.createElement("ul");

let liNodes = []

data.map((item, index) => {

let liNode = document.createElement("li");

liNode.innerHTML = item.title

liNodes.push(liNode)

if (index % 2 !== 0) {

let divNode = document.createElement("div");

console.log(liNodes)

divNode.appendChild(liNodes[index - 1])

divNode.appendChild(liNodes[index])

ulNode.appendChild(divNode)

}

})

const dataLength = data.length;

if (dataLength % 2 !== 0) {

let divNode = document.createElement("div");

divNode.appendChild(liNodes[dataLength - 1])

ulNode.appendChild(divNode)

}

fragment.appendChild(ulNode)

document.getElementById("app").appendChild(fragment)

反對回復 2019-04-09

3 回答
0 關注
606 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

js 單一有序數據結構 如何在頁面在生成雙層有序的列表

js 單一有序數據結構 如何在頁面在生成雙層有序的列表

3 回答

添加回答

js 單一有序數據結構如何在頁面在生成雙層有序的列表

js 單一有序數據結構如何在頁面在生成雙層有序的列表