jQuery - 获取 2 个标签之间的内容并将其包装在新元素中

Question

我遇到了一个问题，我只是不知道如何解决这个(相对)简单的函数。我想要实现的目标如下。我的客户正在使用 CMS，它为我提供了此输出。

<div class="foldOutEnabled">

    <h2>Title 01</h2>

        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

        <h3>subtitle 01</h3>
        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

    <h2>Title 02</h2>

        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

        <h3>subtitle 02</h3>
        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

</div>

我想做的是获取'h2'标签之间的所有HTML并将其包装在另一个div中(这样jQUery可以用它制作一个 Accordion 菜单)。为了让它工作，我需要输出变成这样，

<div class="foldOutItem">
    <div class="foldOutItemTitle">
        <h2>
            <a href="#"><img class="foldoutArrow" width="17" height="20" alt="" src="../images/footer-arrow.png">Title 01</a>
        </h2>
    </div>
    <div class="foldOutItemContent">

        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

        <h3>subtitle 01</h3>
        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

    </div>
</div>

etc...

在尝试了许多不同的解决方案和方法之后，我得到了以下结果，

if ($('.foldOutEnabled').length) {

    var newHtml = '<div class="foldOutTitle"><span><a id="foldOutAll" href="#">Alles uitklappen</a></span></div>';

    $('.foldOutEnabled h2, .foldOutEnabled h3, .foldOutEnabled table, .foldOutEnabled p, .foldOutEnabled span').each(function(i) {

        if (this.nodeName == 'H2')
        {
            if (i != 0) { newHtml += '</div></div>'; }
            newHtml += '<div class="foldOutItem"><div class="foldOutItemTitle"><h2><a href="#"><img src="../images/footer-arrow.png" alt="" width="17" height="20" class="foldoutArrow" />' + $(this).html() + '</a></h2></div><div class="foldOutItemContent">';
        } else {
            newHtml += $(this).html();
        }

    });

    newHtml += '</div></div>';
    $('.foldOutEnabled').html(newHtml);
}

在我看来，这可以改进，但除了 .html() 删除所有 html 标签之外，它还可以工作。因此，所有“p”和“h3”以及内容包含的更多标签都消失了。

现在我的问题是，我该如何防止这种情况发生？

Answer 1

试试这个:

jsFiddle demo

在演示中，我为新类着色以帮助可视化更改。

$('.foldOutEnabled h2').each(function(){
  $(this).nextUntil('h2').andSelf().wrapAll('<div class="foldOutItem" />');
  $(this).nextAll().wrapAll('<div class="foldOutItemContent" />')
    .end().wrap('<div class="foldOutItemTitle" />');
});

http://api.jquery.com/each/
http://api.jquery.com/nextuntil/
http://api.jquery.com/andself/
http://api.jquery.com/wrapall/
http://api.jquery.com/nextall/
http://api.jquery.com/end/