在只有标题的文档上添加滚动间谍答案

【问题标题】：Add scrollspy on document with only heading在只有标题的文档上添加滚动间谍
【发布时间】：2015-06-11 07:39:54
【问题描述】：

我必须在没有<div> 或<section> 但只有<h#> 和id 属性的文档上添加滚动间谍功能。 我无法修改原始文档结构。但我可以使用 JQuery 动态修改它。所以我想用我的<h#> 标记的id 属性生成div 并将<h#> 和所有元素包装到下一个相同级别<h#>。

我知道存在 nextUntil() 方法，我试试这个（为了测试，这不是我需要的）：

$("h1").each(function()
{
    el = $();
    $(this).nextUntil("h1").clone().appendTo(el);
});

但它不起作用el 不包含元素。在这里，我向您展示我的 HTML 文档的结构。

<html>
<head>
</head>

<body>
    <h1 id="firstId">First H1 header</h1>
    <!-- Some text, tables, pictures -->

    <h1 id="secondId">Second H1 header</h1>
        <h2 id="thirdId">First H2 header</h2>
        <!-- Some text, tables, pictures -->

    ...
</body>
</html>

如果您有什么想法或建议...谢谢=)

【问题讨论】：

标签： jquery html scrollspy

【解决方案1】：

试试这个

$(function () {
    $('h1').each(function () {
        $(this).nextUntil('h1').add(this).wrapAll('<div />');
    });
});

还有这个

$('#subgroup h3').each(function() {
    $(this).nextUntil('h3').wrapAll('<div id="myid" class="myclass"></div>');
});

参考

Wrap HTML with DIV until next H3

How to wrap h1 and follow content in div?

【讨论】：