javascript - 如何从 jquery :header selector 构建嵌套列表

Question

我的 html 看起来像这样:

<h1 id="header1">H1</h1> <p>Lorem ipsum</p> <h2 id="header2">H2</h2> <p>lorem ipsum</p> <h2 id="header3">H2</h2> <p>lorem upsum</p> <h3 id="subHeader1">H3</h3> <p>Lorem Ipsum</p>

我正在使用以下 jquery 选择器来获取所有具有 id 的标题。

var headings = $( ":header[id]" );

我想构建一个包含所有标题的嵌套列表，以便我想出这个:

<ul><li>H1
     <ul><li>H2<li>
         <li>H2
           <ul><li>H3</li></ul>
         </li>
      </ul>
 </li></ul>

我希望有一个简单的方法来完成这个。搜索 stackoverflow 但找不到任何东西。我能够构建平面列表，但在构建嵌套列表时遇到问题。

任何帮助将不胜感激。谢谢!

Answer 1

我想说这并不容易。它不仅需要一些算法，还需要一些有关 jQuery 的知识，它是两者的结合，因此它会影响我们编写代码的方式。

这里的想法是你需要初始化一个根 ul，在每个 ul 中我们应该保存一些对子头集合的引用，然后我们需要循环通过此集合将每个 header 转换为 ul。新转换的 ul 应该被添加到某个集合(某种堆栈)并且我们有一个 while 循环运行直到这个堆栈变空。

很难更好地解释它，因为正如我所说，这相当复杂，尤其是对于同时不熟悉算法和 jQuery 的新手。这是代码:

//Initialize the root UL
var ul = $('<ul>');
for(var i = 1; i < 8; i++){
  var hs = $('h' + i);
  if(hs.length){
    ul[0].childHeaders = hs
    ul[0].childHeaderLevel = i;
    break;
  }
}

var rootUl = ul;
//main loop
while(ul.length){    
  var nextUl = $();
  //loop through each ul
  ul.each(function(){
     var innerUl = this;
     var n = this.childHeaderLevel;
     //turn each childHeader into the corresponding ul
     innerUl.childHeaders.each(function(i,elem){
        var childUl = $('<ul>').append('<li>' + $(elem).html() + '</li>')
                               .appendTo(innerUl);
        childUl[0].childHeaders = $(this).nextUntil('h' + n)
                                         .filter('h' + (n+1));
        childUl[0].childHeaderLevel = n + 1;            
        nextUl = nextUl.add(childUl);
     });                            
  });
  ul = nextUl;   
}
//append the root UL to the body after emptying
$('body').empty().append(rootUl);

Demo.