Javascript 使用jQuery将数组转换为列表
将二维数组转换为html列表遇到了一个难题。数组就像Javascript 使用jQuery将数组转换为列表,javascript,jquery,arrays,list,Javascript,Jquery,Arrays,List,将二维数组转换为html列表遇到了一个难题。数组就像 var arr=[[1,"link1",3],[2,"link2",0],[3,"link3",2]] 嵌套数组项的结构是id，textOfLink，parent。父项0表示顶级，父项3表示该项位于id为3的其他列表项下。目标输出将是一个类似html的列表 link2 link3 link1 请注意，数组不限于3项，它是动态的。你知道如何在jQuery中实现它吗？类似的东西 <html> <head>
var arr=[[1,"link1",3],[2,"link2",0],[3,"link3",2]]
idtextOfLinkparentlink2
link3
link1
<html>
<head>
<script src="jquery-1.10.2.js"></script>
</head>
<body>
<ul id='container'></ul>
<script>
var arr=[[1, "link1", 3], [2, "link2", 0], [3, "link3", 2]];
var count=arr.length,
i=0;
do{
if(arr[i][2]==0){
$('#container').append('<li id="'+arr[i][0]+'">'+arr[i][1]+'</li>');
arr.splice(i,1);
count--;
}
else if($('#'+arr[i][2]).length >0){
$('#'+arr[i][2]).append('<li id="'+arr[i][0]+'">'+arr[i][1]+'</li>')
arr.splice(i,1);
count--;
}
i++;
if(count<=i)
i=0;
}while(count>0)
</script>
</body>
</html>
var arr=[[1，“link1”，3]，[2，“link2”，0]，[3，“link3”，2]；
变量计数=arr.length，
i=0；
做{
如果（arr[i][2]==0）{
$（“#容器”）.append（““+arr[i][1]+” ”）；
阵列拼接（i，1）；
计数--；
}
else if（$（'#'+arr[i][2]）。长度>0）{
$（'#'+arr[i][2]）。追加（''+arr[i][1]+' '））
阵列拼接（i，1）；
计数--；
}
i++；
if（count0）
// We'll need to be able to access them by index
var byIndex = [];
// Zero is defined as the top-level object
byIndex[0] = {children: []};
// Create objects at their respectively indexed locations
for (var i = 0; i < arr.length; i++) {
v = arr[i];
byIndex[v[0]] = {id: v[0], link: v[1], children: []};
}
// Fill out the tree
for (var i = 0; i < arr.length; i++) {
v = arr[i];
byIndex[v[2]].children.push(byIndex[v[0]]);
}
// Add to the document
function makeItem(item) {
if (item.children.length == 0) {
return jQuery('<a>').attr('href', item.link);
}
var list = jQuery('<ul>');
list.append(jQuery('<li>').append(jQuery('<a>').attr('href', item.link)));
for (var i = 0; i < item.children.length; i++) {
list.append(jQuery('<li>').append(makeItem(item.children[i])));
}
return list;
}
jQuery(dest).append(makeItem(byIndex[0]));
//我们需要能够通过索引访问它们
var byIndex=[]；
//零被定义为顶级对象
byIndex[0]={子项：[]}；
//在各自的索引位置创建对象
对于（变量i=0；i”）；
list.append（jQuery（''）.append（jQuery（''.attr（'href'，item.link））；
对于（变量i=0；i”）.append（makeItem（item.children[i]））；
}
退货清单；
}
jQuery（dest）.append（makeItem（按索引[0]）；
<ul id="the_list"></ul>
var arr=[[1,"link1",3],[2,"link2",0],[3,"link3",2],[4,"link4",0]];
var hasOrphanLinks = false;
do{
hasOrphanLinks = false;
$.each(arr, function(index, value){
// make sure this element hasn't already been created
if(!$("#item" + value[0]).length){
if(value[2] == 0){
// top level element
$("#the_list").append('<li id="item' + value[0] + '">' + value[1] + '</li>');
}else if($("#item" + value[2]).length){
// the parent item exists, so append this item
if(!$("#item" + value[2] + " ul").length){
// need an empty list
$("#item" + value[2]).append("<ul />");
}
$("#item" + value[2] + " ul").append('<li id="item' + value[0] + '">' + value[1] + '</li>');
}else{
// need to revisit atleast one item. The parent hasn't been created yet
hasOrphanLinks = true;
}
}
});
}while(hasOrphanLinks);
var arr=[[1，“link1”，3]，[2，“link2”，0]，[3，“link3”，2]，[4，“link4”，0]；
var=false；
做{
hasoverlinks=false；
$。每个（arr，函数（索引，值）{
//确保尚未创建此元素
如果（！$（“#项”+值[0]）。长度）{
如果（值[2]==0）{
//顶层元素
$（“#列表”）.append（““+value[1]+” ”）；
}else if（$（“#项”+值[2]）长度）{
//父项存在，因此附加此项
if（！$（“#项”+值[2]+“ul”）.长度）{
//需要一个空列表吗
$（“#项”+值[2]）。追加（“
”）；
}
$（“#item”+value[2]+“ul”）.append（““+value[1]+” ”）；
}否则{
//至少需要重新访问一项。尚未创建父项
hasoverlinks=true；
}
}
});
}而(a),；
var arr = [
[1, 'link1', 3],
[2, 'link2', 0],
[3, 'link3', 2]
];
function processData(list) {
var out = $('<ul>'), // or ol
idMap = {};
function get(id, text) {
var $el = idMap[id] || (idMap[id] = $('<li><a></a></li>'));
if (text) {
$el.children('a').text(text);
}
return $el;
}
function addChild($parent, $child) {
var $list = $parent.children('ul');
if (!$list.length) {
$list = $('<ul>').appendTo($parent);
}
$list.append($child);
}
var id,
text,
parentId,
$el;
for (var i = 0, l = list.length, item; i < l; i++) {
item = list[i];
id = item[0];
text = item[1];
parentId = item[2];
$el = get(id, text);
if (parentId) {
addChild(get(parentId), $el);
} else {
out.append($el);
}
}
return out;
}
$('#result').append(processData(arr));
var-arr=[
[1，'链接1'，3]，
[2，'链接2'，0]，
[3'链接3'，2]
];
函数processData（列表）{
var out=$（“”）、//或ol
idMap={}；
函数get（id，text）{
var$el=idMap[id]| |（idMap[id]=$（''）；
如果（文本）{
$el.children（'a'）。文本（text）；
}
返回$el；
}
函数addChild（$parent，$child）{
var$list=$parent.children（'ul'）；
如果（！$list.length）{
$list=$（“”）.appendTo（$parent）；
}
$list.append（$child）；
}
变量id，
文本，
父ID，
$el；
for（var i=0，l=list.length，item；i
- 一切都包装在一个函数->可重用，干净，易于维护，没有全局变量添加异常functionName
- 您将得到您想要的作为输入（数据数组）的输出（jQuery元素）
- 如果你看我的代码，你可以很容易地阅读和遵循我的每一行
- 干净代码