如何使用JavaScript或Jquery在HTML中创建类似组的结构
How to make group like structure in HTML using JavaScript or Jquery
我有这样的数据源
var source = [
{
group: "g-one",
item: "one"
},
{
group: "g-one",
item: "two"
},
{
group: "g-one",
item: "three"
},
{
group: "g-two",
item: "aaa"
},
{
group: "g-two",
item: "bbb"
}
];
从这里我需要创建一个像这样的结构<div id='g-one'>
<div>one</div>
<div>two</div>
<div>three</div>
</div>
<div id='g-two'>
<div>aaa</div>
<div>bbb</div>
</div>
请帮我解决这个问题
jQuery方式
像这样先把组取出来:
var groups = $.unique($.map(source, function (n) {
return n.group;
}));
遍历groups
数组并得到输出:
$.each(groups, function (i, data) {
$("<div/>", {
"id": data.group,
"html": function () {
var elmts = $.grep(source, function (a) {
return a.group === data;
});
return $.map(elmts, function (n) {
return "<div>" + n.item + "</div>";
}).join(" ");
}
}).appendTo("body");
});
Demo: http://jsfiddle.net/hungerpain/nZTvp/6/
仅使用JavaScript
使用for
循环来迭代并创建元素。要获取字符串,请使用字符串连接。
var group = source[0].group;
var html = "<div id='" + group + "'>";
var elemts = [];
for (var i = 0; i <= source.length; i++) {
if (i !== source.length) {
if (group === source[i].group) {
html += "<div>" + source[i].item + " </div>";
} else {
html += "</div>";
elemts.push(html);
group = source[i].group;
html = "<div id='" + group + "'><div>" + source[i].item + " </div>";
}
} else {
html += "</div>";
elemts.push(html);
}
}
Demo: http://jsfiddle.net/hungerpain/nZTvp/5/
var source = [ { group: "g-one", item: "one" }, { group: "g-one", item: "two" }, { group: "g-one", item: "three" }, { group: "g-two", item: "aaa" }, { group: "g-two", item: "bbb" } ];
var a=new Array();
for(var i=0;i<source.length;i++)
{
a[i]=source[i].group;
}
b = {};
for (var i = 0; i < a.length; i++)
{
b[a[i]] = a[i];
}
c = [];
for (var key in b)
{
c.push(key);
}
var message = "";
for(var i=0;i<c.length;i++)
{
message+="<div id = '"+c[i]+"'>"
for(var j=0;j<source.length;j++)
{
if(c[i] == source[j].group)
{
message+="<div>"+source[j].item+"</div>";
}
}
message+="</div>";
}
alert(message);
相关文章:
- 从json对象聚集数据并创建层次结构
- 无法使用Selenium创建本地windows目录结构
- 如何在javascript中使用2个一维数组创建层次结构树
- 创建新的结构画布会更改画布位置
- 我该如何开始使用C#和MVC创建这个javascript结构呢
- 关于如何为答案和问题创建良好结构的提示
- 用javascript创建结构
- 正在创建嵌套的HTML结构
- 从字符串行创建结构化列表
- 创建包含预定结构的新标签
- 从文件目录结构创建JSON数据的有效功能
- 如何使用继承创建类似谷歌闭包的结构
- 如何创建一个结构化为AMD模块的可重用库
- 重新创建结构.js画布并导出为图像
- 如何使用来自其他 json 对象的 id 和父 id 创建像树结构一样的 json
- 如何从平面JavaScript数组创建分层HTML结构
- 在 javascript 中创建一个具有自定义结构的对象
- 创建 jquery promise 层次结构的指南
- 谷歌浏览器扩展程序:如何使用层次结构分支创建右键单击扩展程序
- 从字符串创建结构化对象的JavaScript函数