CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Adrian
Adrian

Reputation: 3062

How to wrap elements with starting and ending element in jQuery?

I have multiple rows of content with alternating markup.

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

I want to wrap each h1 and its immediate sibling into a div class="wrap"

So the output should look like this(i want to exlcude the img element):

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

The code that I have tried so far is but it is not working well:

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

Any help is appreciated. Thanks

Upvotes: 0

Views: 84

Answers (1)

charlietfl
charlietfl

Reputation: 171669

Use wrapAll() on each grouping. wrap() will wrap each element in collection individually

$(".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>

Upvotes: 1

Related Questions