0

将二维数组转换为 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 中做到这一点吗？

4

5 回答 5

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);

jsfiddle

于 2013-09-02T07:01:27.327 回答
0

就像是？

<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>
于 2013-09-02T06:48:50.120 回答
0

http://jsfiddle.net/f9wtu/1/

这是我的版本：

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));

为什么这是一个好方法：

  • 一切都包装在一个函数中 -> 可重用，干净，易于维护，不添加全局变量异常函数名
  • 您正在为输入（数据数组）获得所需的输出（jQuery 元素）
  • 如果您查看我的代码，您可以轻松阅读并遵循我的每一行。
  • 干净的代码
于 2013-09-02T07:04:05.910 回答
0

我会将您的列表预处理成更像图形的东西：

// 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]));

但是，如果您可以控制用于创建列表的数据，则可以重新排列它，这样就不需要第一步了。

另一种选择是首先使用您要查找的 ID 创建项目，然后使用 ID 选择器将它们直接移动到其父项。

于 2013-09-02T06:59:13.723 回答
0 
//For Add
var DataList = [];
var aa = $("#divArea :input").serializeArray();
DataList.push(aa);
console.log(DataList);

//for Remove
 DataList.pop();
于 2021-09-01T09:49:33.067 回答