javascript - 如何在 jQuery 中用开始和结束元素包装元素？

Question

我有多行带有交替标记的内容。

<div class="tabs-services">

    <div class="et_pb_tab_content">

        <img src="image_url" />
        <h1>1 Walkthrough</h1>
        <p>Lorem ipsum <a href="#">Click Here!</a></p>

        <h1>1 Walkthrough</h1>
        <p>Lorem ipsum <a href="#">Click Here!</a></p>
        <img src="image_url" />

        <img src="image_url" />
        <h1>1 Walkthrough</h1>
        <p>Lorem ipsum <a href="#">Click Here!</a></p>

    </div>

</div>

我想将每个 h1 及其直接兄弟 包装到一个 div class="wrap"

所以输出应该是这样的(我想排除 img 元素):

<div class="tabs-services">

    <div class="et_pb_tab_content">

        <img src="image_url" />
        <div class="wrap">
            <h1>1 Walkthrough</h1>
            <p>Lorem ipsum <a href="#">Click Here!</a></p>
        </div>

        <div class="wrap">
            <h1>2 Walkthrough</h1>
            <p>Lorem ipsum <a href="#">Click Here!</a></p>
        </div>
        <img src="image_url" />

        <img src="image_url" />
        <div class="wrap">
            <h1>3 Walkthrough</h1>
            <p>Lorem ipsum <a href="#">Click Here!</a></p>
        </div>

    </div>

</div>

到目前为止，我尝试过的代码是，但效果不佳:

   $(".tabs-services .et_pb_tab_content h1").each(function() {
        $(this).nextUntil("h1").wrap("<div class='a'></div");
   });

感谢任何帮助。谢谢

Answer 1

对每个分组使用wrapAll()。 wrap() 将单独包装集合中的每个元素

$(".tabs-services .et_pb_tab_content h1").each(function() {
        $(this).next().add(this).wrapAll("<div class='a'></div");
});

.a { border: 2px solid #ccc; margin:1em}

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

    <div class="et_pb_tab_content">

        <img src="image_url" />
        <h1>1 Walkthrough</h1>
        <p>Lorem ipsum <a href="#">Click Here!</a></p>

        <h1>1 Walkthrough</h1>
        <p>Lorem ipsum <a href="#">Click Here!</a></p>
        <img src="image_url" />

        <img src="image_url" />
        <h1>1 Walkthrough</h1>
        <p>Lorem ipsum <a href="#">Click Here!</a></p>

    </div>

</div>