我已经考虑了一段时间,但无法想出一个可行的解决方案。我什至不能伪代码...
例如,假设您有一个标题结构如下的页面:
<h1>Heading level 1</h1>
<h2>Sub heading #1</h2>
<h2>Sub heading #2</h2>
<h3>Sub Sub heading</h3>
<h2>Sub heading #3</h2>
<h3>Sub Sub heading #1</h3>
<h3>Sub Sub heading #2</h3>
<h4>Sub Sub Sub heading</h4>
<h2>Sub heading #4</h2>
<h3>Sub Sub heading</h3>
使用 JavaScript(任何框架都可以),您将如何生成这样的列表:(带有嵌套列表)
<ol>
<li>Heading level 1
<ol>
<li>Sub heading #1</li>
<li>Sub heading #2
<ol>
<li>Sub Sub heading</li>
</ol>
</li>
<li>Sub heading #3
<ol>
<li>Sub Sub heading #1</li>
<li>Sub Sub heading #2
<ol>
<li>Sub Sub Sub heading (h4)</li>
</ol>
</li>
</ol>
</li>
<li>Sub heading #4
<ol>
<li>Sub Sub heading</li>
</ol>
</li>
</ol>
</li>
</ol>
每次我尝试从某种方法开始时,它最终都会变得非常臃肿。
解决方案需要遍历每个标题并将其放入适当的嵌套列表中 - 我不断地对自己重复这个但我无法勾勒出任何东西!
即使您脑子里有方法但没有时间编写代码,我仍然想知道它! :)
谢谢!
最佳答案
这里的问题是没有任何好的方法可以按文档顺序检索标题。例如 jQuery 调用 $('h1,h2,h3,h4,h5,h6')
将返回您所有的标题,但所有 <h1>
s 将首先出现,然后是 <h2>
等等。当您使用逗号分隔的选择器时,还没有主要的框架工作按文档顺序返回元素。
您可以通过为每个标题添加一个公共(public)类来解决这个问题。例如:
<h1 class="heading">Heading level 1</h1>
<h2 class="heading">Sub heading #1</h2>
<h2 class="heading">Sub heading #2</h2>
<h3 class="heading">Sub Sub heading</h3>
<h2 class="heading">Sub heading #3</h2>
...
现在选择器 $('.heading')
会让它们井井有条。
下面是我将如何使用 jQuery 来实现:
var $result = $('<div/>');
var curDepth = 0;
$('h1,h2,h3,h4,h5,h6').addClass('heading');
$('.heading').each(function() {
var $li = $('<li/>').text($(this).text());
var depth = parseInt(this.tagName.substring(1));
if(depth > curDepth) { // going deeper
$result.append($('<ol/>').append($li));
$result = $li;
} else if (depth < curDepth) { // going shallower
$result.parents('ol:eq(' + (curDepth - depth - 1) + ')').append($li);
$result = $li;
} else { // same level
$result.parent().append($li);
$result = $li;
}
curDepth = depth;
});
$result = $result.parents('ol:last');
// clean up
$('h1,h2,h3,h4,h5,h6').removeClass('heading');
$result
现在应该是你的 <ol>
.
另请注意,这将处理 <h4>
接着是 <h1>
(一次向下移动不止一个级别),但它不会处理 <h1>
接着是 <h4>
(一次不止一个级别)。
关于javascript - 将标题层次结构生成为有序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/497418/