Question

I would like to use the jQuery .wrap() function to wrap a div around a range of html tags from a specific start and end point. For example, here’s what my HTML document looks like now:

My current HTML structure:

<div class="single-post">
    <img src="" />
    <p></p>
    <p></p>
    <blockquote></blockquote>
    <p></p>
</div>

I would like to wrap a div with a class of “new” around these elements from above:

<p></p>
<p></p>
<blockquote></blockquote>
<p></p>

In effect this is what my end result should look like:

<div class="single-post">
    <img src="" />
    <div class="new">
        <p></p>
        <p></p>
        <blockquote></blockquote>
        <p></p>
    </div>
</div>

Answer 1

Ok, assuming that img is always a lone ranger, you could do something like this:

jQuery:

$('.single-post > img').siblings().wrapAll('<div class="new" />');

---

You could also do something like this:

$('.single-post').children(':not(.exclude)').wrapAll('<div class="new" />');