获取元素类型 (h1's) 之间的所有元素并换行 div

Question

我有以下结构：

<div class="wrapper">
    <h1>Header 1</h1>
    <h2>subtitle 1</h2>
    <p>aaa</p>
    <p>bbb</p>
    <p>ccc</p>
    <h2>subtitle2</h2>
    <p>ddd</p>

    <h1>Header 2</h1>
    <h2>subtitle 3</h2>
    <p>eee</p>
    <p>fff</p>

</div>

我想 select 每个 h1 之间的所有 h1 和 p 元素并包装在 div 中，所以我最终得到：

<div class="wrapper">
    <div>
        <h1>Header 1</h1>
        <h2>subtitle 1</h2>
        <p>aaa</p>
        <p>bbb</p>
        <p>ccc</p>
        <h2>subtitle2</h2>
        <p>ddd</p>
    </div>

    <div>
        <h1>Header 2</h1>
        <h2>subtitle 3</h2>
        <p>eee</p>
        <p>fff</p>
    </div>
</div>

我已经尝试了如下各种方法，但 none 效果很好：

$( "h1" ).prevUntil( "h1" ).wrapAll( "<div></div>" );

Answer 1

您将使用.each jQuery API来完成。

$("h1").each(function(){})

.prevUntil将反转Dom节点遍历，使用.nextUntil代替。
要匹配end-up输出，脚本如下：

<script>
    $("h1").each(function() {
        $(this).nextUntil( "h1" ).wrapAll( "<div></div>" );
        // uncomment the two lines to move the h1 inside the wrapped div
        // const el = $(this).next();
        // $(this).prependTo(el);
    });
</script>

Answer 2

我想到了这个解决方案，它获取所有子项，然后如果它是 h1 标签，它将创建一个新的 div 并将 H1 和其他子项移入其中

    var newDiv;
    $(document).ready(function(){
        $(".wrapper").children().each(function(){
           if($(this).is("h1")){
              $(this).before("<div></div>");
              newDiv =  $(this).prev();
              newDiv.append($(this));
           }else{
            newDiv.append($(this));
           }
        });
       
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">

        <h1>Header 1</h1>
        <h2>subtitle 1</h2>
        <p>aaa</p>
        <p>bbb</p>
        <p>ccc</p>
        <h2>subtitle2</h2>
        <p>ddd</p>

        <h1>Header 2</h1>
        <h2>subtitle 3</h2>
        <p>eee</p>
        <p>fff</p>
 
</div>

获取元素类型 (h1's) 之间的所有元素并换行 div

Get all elements between element type (h1's) and wrap in div

javascript

jquery

traversal

siblings

next