Javascript 使用jquery生成任意深度的列表

在javascript中，我有一个表示任意深度列表的对象数组

data =
[
 { title, depth },
 { title, depth },
 { title, depth }, 
 { title, depth }, 
]

…where depth是元素在列表中的深度

我想把这些数据转换成html

例如：

[
 { title: "one", depth : 1 },
 { title: "two", depth : 1 },
 { title: "three", depth : 2 }, 
 { title: "four", depth : 3 }, 
 { title: "five", depth : 1 }, 
]

变成

<ul>
  <li><p>one</p></li>
  <li>
    <p>two</p>
    <ul>
      <li>
        <p>three</p>
        <ul>
          <li><p>four</p></li> 
        </ul>
      </li>
    </ul>
  </li>
  <li><p>five</p></li>
</ul>

一个


两个



三


四个





五

使用jQuery最简单的方法是什么

---

谢谢

以下是一种方法：

(function($) {
  $.listify = function(items) {
    var container = $('<div></div>'), root = container;
    var depth = 0;
    for (var i = 0; i < items.length; ++i) {
      var item = items[i];
      if (item.depth > depth) {
        while (item.depth > depth) {
          var ul = $('<ul></ul>').appendTo(container);
          var li = $('<li></li>').appendTo(ul);
          container = li;
          ++depth;
        }
      } else if (item.depth <= depth) {
        while (item.depth < depth) {
          container = container.parent().parent();
          --depth;
        }
        container = $('<li></li>').insertAfter(container);
      }
      container.append('<p>' + item.title + '</p>');
    }
    return root.children();
  }
})(jQuery);

这是动态的：

无论你下了多少层，它都会一直被创造出来

 var json = [
 { title: "one", depth : 1 },
 { title: "two", depth : 10 },
 { title: "three", depth : 20 }, 
 { title: "four", depth : 25 }, 
 { title: "five", depth : 11 }, 
]
    var dom = $('body') ;
    dom.append($('<ul>'))
    //console.log(json.length)
    for( var i = 0; i < json.length; i++){
    //console.log(json[i])
        var appendTo = $('body')
        for(var j = 1; j <= json[i].depth; j++){
            console.log(appendTo, json[i], json[i].depth, '1st')
            if(appendTo.children('ul').length <= 0){
                console.log('no ul', j)
                appendTo.append($('<ul>'))
            }
           appendTo = $(appendTo.children('ul'))
            console.log(appendTo, json[i], '2nd')
        }
       console.log(appendTo, json[i], 'appending')
       appendTo.append($('<li><p>'+json[i].title+'</p></li>'))
    }

var json=[
{标题：“一”，深度：1}，
{标题：“两个”，深度：10}，
{标题：“三”，深度：20}，
{标题：“四”，深度：25}，
{标题：“五”，深度：11}，
]
var dom=$（'body'）；
dom.append（$（'
'））
//log（json.length）
for（var i=0；i$.fn.listify=函数（列表）{
var stack=[this]；
$.each（列表，函数（）{
var item=$（“
”+this.title+”
）；
堆栈[this.depth]=堆栈[this.depth]
？项目插入后（堆叠[此深度]）
：item.wrap（“
”）.appendTo（stack[this.depth-1]）；
stack.length=this.depth+1；
});
}

可用于多个级别并正确嵌套标记：

(function ($) {
    $.makelist = function (arr) {  
    var currentdepth = 1;
    var root = $('<ul>');
    var el = root;
    var idx = 0;

    while (idx < arr.length) {
      if (arr[idx].depth == currentdepth) {
         el.append($('<li>').html($('<p>').text(arr[idx].title)));
         idx++;
      }
      else if (arr[idx].depth > currentdepth) {
        newel = $('<ul>');
        el.append(newel);
        el = newel;
        currentdepth++;
      }
      else {
        el = el.parent('ul');
        currentdepth--;
      }
    }
    return root;
  }
})(jQuery);

        $(document).ready(function () {
            arr = [
                     { title: "one", depth: 1 },
                     { title: "two", depth: 1 },
                     { title: "three", depth: 2 },
                     { title: "four", depth: 3 },
                     { title: "five", depth: 1 },
                    ];

            $('body').append($.makelist(arr));
        });

（函数（$）{
$.makelist=函数（arr）{
var currentdepth=1；
变量根=$（“
”）；
var el=根；
var-idx=0；
while（idx）.html（$（'）.text（arr[idx].title））；
idx++；
}
else if（arr[idx].depth>currentdepth）{
纽尔=$（“
”）；
el.append（newel）；
el=newel；
currentdepth++；
}
否则{
el=el.母公司（“ul”）；
当前深度--；
}
}
返回根；
}
})（jQuery）；
$（文档）.ready（函数（）{
arr=[
{标题：“一”，深度：1}，
{标题：“两个”，深度：1}，
{标题：“三”，深度：2}，
{标题：“四”，深度：3}，
{标题：“五”，深度：1}，
];
$（'body'）.append（$.makelist（arr））；
});

维持秩序是必要的吗？还是可以是这样的？

一个
• 五个
• 两个
  三个
  四个
  非常酷，谢谢。如果你把它命名为“列表”，你就应该得到加分是的。

  $.fn.listify = function(list) {
      var stack = [this];
      $.each(list, function() {
          var item = $('<li><p>'+this.title+'</p></li>');
          stack[this.depth] = stack[this.depth] 
              ? item.insertAfter(stack[this.depth]) 
              : item.wrap('<ul>').appendTo(stack[this.depth - 1]);
          stack.length = this.depth + 1;
      });
  }
  

  (function ($) {
      $.makelist = function (arr) {  
      var currentdepth = 1;
      var root = $('<ul>');
      var el = root;
      var idx = 0;
  
      while (idx < arr.length) {
        if (arr[idx].depth == currentdepth) {
           el.append($('<li>').html($('<p>').text(arr[idx].title)));
           idx++;
        }
        else if (arr[idx].depth > currentdepth) {
          newel = $('<ul>');
          el.append(newel);
          el = newel;
          currentdepth++;
        }
        else {
          el = el.parent('ul');
          currentdepth--;
        }
      }
      return root;
    }
  })(jQuery);
  
          $(document).ready(function () {
              arr = [
                       { title: "one", depth: 1 },
                       { title: "two", depth: 1 },
                       { title: "three", depth: 2 },
                       { title: "four", depth: 3 },
                       { title: "five", depth: 1 },
                      ];
  
              $('body').append($.makelist(arr));
          });