Question

我必须在没有<div>或<section>但只有<h#> id属性的文档上添加一个scrollspy功能。 我无法修改原始文档结构。但我可以使用JQuery动态修改它。因此，我希望使用div标记的id属性生成<h#>并将<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>

如果您有一些想法或建议......谢谢=）

Answer 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?

在仅包含标题的文档上添加scrollspy

1 个答案: