gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:56:17 26 4
gpt4 key购买 nike

我的 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 但找不到任何东西。我能够构建平面列表,但在构建嵌套列表时遇到问题。

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

最佳答案

我想说这并不容易。它不仅需要一些算法,还需要一些有关 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.

关于javascript - 如何从 jquery :header selector 构建嵌套列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23817562/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com