jquery - 如何在一节课后将所有 sibling 包装在一个类(class)中？ (jQuery)

Question

我的博客文章有特色图片，其中包含标题、描述和日期等内容详细信息。

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

期望的输出:我想在每个 class="blog-home-thumb"之后将所有剩余的细节包装为一个带有 class 的 div

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

感谢您的帮助:)

Answer 1

您可以遍历每个 .blog-home-thumb 元素，使用 .nextAll() method, 选择所有以下同级元素然后使用 .wrapAll() method :

Example Here

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