javascript – 使用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);

我承认,我只是想说出一些有趣的东西. Here is a jsFiddle.您可以这样称呼它：

$.listify([
  { title: "one",]).appendTo(document.body);