CODEWITHSUNDEEP
jqueryhtmlcss
Adrian
Adrian

Reputation: 3062

How to wrap all siblings in one class after a class? (jQuery)

I have blog posts that has a featured image with content details like title, description and date.

<div id="blog-posts-loop">

    <div class="blog-home-wrap">
        <div class="blog-home-thumb">
            <a href="#" class="su-post-thumbnail">
            <img width="500" height="300" alt="welcome" class="post-thumbnail" src="src_of_img"></a>
        </div>

        <h2 class="blog-home-post-title">This is a title</h2>
        <div class="blog-home-post-excerpt"></div>
        <div class="blog-home-post-date">November 23, 2015</div>

    </div>

    <div class="blog-home-wrap">
        <div class="blog-home-thumb">
            <a href="#" class="su-post-thumbnail">
            <img width="500" height="300" alt="welcome" class="post-thumbnail" src="src_of_img"></a>
        </div>

        <h2 class="blog-home-post-title">This is a title</h2>
        <div class="blog-home-post-excerpt"></div>
        <div class="blog-home-post-date">November 23, 2015</div>

    </div>

    <div class="blog-home-wrap">
        <div class="blog-home-thumb">
            <a href="#" class="su-post-thumbnail">
            <img width="500" height="300" alt="welcome" class="post-thumbnail" src="src_of_img"></a>
        </div>

        <h2 class="blog-home-post-title">This is a title</h2>
        <div class="blog-home-post-excerpt"></div>
        <div class="blog-home-post-date">November 23, 2015</div>

    </div>

</div>

Desired output: I want to wrap all the remaining details as a single div with class after every class="blog-home-thumb"

<div id="blog-posts-loop">

    <div class="blog-home-wrap">
        <div class="blog-home-thumb">
            <a href="#" class="su-post-thumbnail">
            <img width="500" height="300" alt="welcome" class="post-thumbnail" src="src_of_img"></a>
        </div>

        <div class="blog-home-content">
            <h2 class="blog-home-post-title">This is a title</h2>
            <div class="blog-home-post-excerpt"></div>
            <div class="blog-home-post-date">November 23, 2015</div>
        </div>

    </div>

    <div class="blog-home-wrap">
        <div class="blog-home-thumb">
            <a href="#" class="su-post-thumbnail">
            <img width="500" height="300" alt="welcome" class="post-thumbnail" src="src_of_img"></a>
        </div>

        <div class="blog-home-content">
            <h2 class="blog-home-post-title">This is a title</h2>
            <div class="blog-home-post-excerpt"></div>
            <div class="blog-home-post-date">November 23, 2015</div>
        </div>

    </div>

    <div class="blog-home-wrap">
        <div class="blog-home-thumb">
            <a href="#" class="su-post-thumbnail">
            <img width="500" height="300" alt="welcome" class="post-thumbnail" src="src_of_img"></a>
        </div>

        <div class="blog-home-content">
            <h2 class="blog-home-post-title">This is a title</h2>
            <div class="blog-home-post-excerpt"></div>
            <div class="blog-home-post-date">November 23, 2015</div>
        </div>

    </div>



</div>

Thanks for any help :)

Upvotes: 1

Views: 1242

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241258

You could iterate over each .blog-home-thumb element, select all the following sibling elements using the .nextAll() method, and then use the .wrapAll() method:

Example Here

$('.blog-home-thumb').each(function () {
    $(this).nextAll().wrapAll('<div class="blog-home-content"></div>');
});

Upvotes: 1

Related Questions