js数组处理数组以li形式循环显示
一个数组对象arr=[[{'n':'A','q':'111111'},{'n':'B','q':'222222'},],[{'n':'A','q':'333333'},{...
一个数组对象
arr = [[
{'n':'A','q':'111111'},
{'n':'B','q':'222222'},
], [
{'n':'A','q':'333333'},
{'n':'B','q':'444444'},
]];
循环显示成下面这种方式
数组1
<ul class="box1">
<li data-q="A">111111</li>
<li data-q="B">222222</li>
</ul>
数组2
<ul class="box2">
<li data-q="A">333333</li>
<li data-q="B">444444</li>
</ul> 展开
arr = [[
{'n':'A','q':'111111'},
{'n':'B','q':'222222'},
], [
{'n':'A','q':'333333'},
{'n':'B','q':'444444'},
]];
循环显示成下面这种方式
数组1
<ul class="box1">
<li data-q="A">111111</li>
<li data-q="B">222222</li>
</ul>
数组2
<ul class="box2">
<li data-q="A">333333</li>
<li data-q="B">444444</li>
</ul> 展开
2个回答
展开全部
<div id=test></div>
<script>
arr = [[
{'n':'A','q':'111111'},
{'n':'B','q':'222222'},
], [
{'n':'A','q':'333333'},
{'n':'B','q':'444444'},
]];
document.getElementById("test").innerHTML=arr.map(function(o,i){
return '数组'+(i+1)+'<ul class="box1">'+o.map(function(o){
return '<li data-q="'+o.n+'">'+o.q+'</li>';
}).join('')+'</ul>';
}).join('');
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var data = [[
{'n': 'A', 'q': '111111'},
{'n': 'B', 'q': '222222'},
], [
{'n': 'A', 'q': '333333'},
{'n': 'B', 'q': '444444'},
]];
function show_list(a, i) {
if (!a[i]) return;
var n = i + 1;
var u = document.createElement('ul');
u.className = 'box' + n;
for (var j = 0; j < a[i].length; j++) {
var l = document.createElement('li');
l.innerText = a[i][j]['q'];
l.setAttribute('data-q', a[i][j]['n']);
u.appendChild(l);
}
document.body.appendChild(u);
show_list(a, n);
}
show_list(data, 0);
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
