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>

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

1 个答案: