Question

将二维数组转换为html列表遇到了挑战。数组就像

var arr=[[1,"link1",3],[2,"link2",0],[3,"link3",2]]

嵌套数组项的结构是id，textOfLink，parent。 parent 0表示顶级，parent 3表示该项位于另一个id为3的列表项下。目标输出将是html中的列表，如

link2
  link3
    link1

请注意阵列不限于3个项目，它是动态的。任何想法如何在jQuery中做到这一点？

Answer 1

喜欢什么？

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

Answer 2

我会将您的列表预处理为更像图形的内容：

// 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选择器将它们直接移动到其父项。

Answer 3

喜欢这个？

<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

Answer 4

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

为什么这是一个好方法：

一切都包含在一个功能中 - ＆gt;可重用，干净，易于维护，没有添加全局变量exception functionName
您正在获得您想要的输入（jQuery元素）输入（数据数组）
如果您查看我的代码，您可以轻松阅读并遵循我的每一行。
清洁代码

使用jQuery将数组转换为列表

4 个答案: