Wrapping elements into div with jQuery

Question

I need to wrap my blog content into a div some how with jQuery. But images and divs and tables should be left out.

This markup:

<div class="entry-content">
    <h1>Title</h1>
    <div class="into">Some text is here</div>
    <p>Paragraph text</p>
    <p>Paragraph text</p>
    <ul>
        <li>Maybe list too</li>
        <li>Like this</li>
    </ul>
    <div class="media">
        <img src="" alt="" />
    </div>
    <p>Paragraph text</p>

    <h2>Another title</h2>
    <p>Paragraph text</p>
    <h3>Yet another title</h3>
    <p>Paragraph text</p>
    <p>Paragraph text</p>
    <blocquote>
        <p>Quote</p>
    </blockquote>

    <h1>Second title</h1>
    <h2>Sub Title</h2>
    <p>Paragraph text</p>
    <im src="" alt="" />
    <p>Paragraph text</p>
    <table>
        <td></td>
    </table>
    <p>Paragraph text</p>
    <h2>Title</h2>
    <div class="media">
        <img src="" alt="" />
    </div>
    <p>Paragraph text</p>
</div>

Into this:

<div class="entry-content">
    <div class="container">
        <h1>Title</h1>
        <div class="into">Some text is here</div>
        <p>Paragraph text</p>
        <p>Paragraph text</p>
        <ul>
            <li>Maybe list too</li>
            <li>Like this</li>
        </ul>
    </div>
    <div class="media">
        <img src="" alt="" />
    </div>
    <div class="container">
        <p>Paragraph text</p>

        <h2>Another title</h2>
        <p>Paragraph text</p>
        <h3>Yet another title</h3>
        <p>Paragraph text</p>
        <p>Paragraph text</p>
        <blocquote>
            <p>Quote</p>
        </blockquote>

        <h1>Second title</h1>
        <h2>Sub Title</h2>
        <p>Paragraph text</p>
    </div>
    <img src="" alt="" />
    <div class="container">
        <p>Paragraph text</p>
    </div>
    <table>
        <td></td>
    </table>
    <div class="container">
        <p>Paragraph text</p>
        <h2>Title</h2>
    </div>
    <div class="media">
        <img src="" alt="" />
    </div>
    <div class="container">
        <p>Paragraph text</p>
    </div>
</div>

So basically wrap everything to except img, .media and tables. This is done because text is going to be 660px wide when tables and images will be full browser width.

I'm using Drupal and this is content from wysiwyg so if someone knows how to do it on php level would be great but I believe this should be doable in jQuery too. Maybe with some regex?

Any help would be appreciated because I'm kind of lost.

Answer 1

You can do something like

var $els = $();

$('.entry-content').children().each(function(){
    if($(this).is('img, .media')){
        $els.wrapAll('<div class="container" />');
        $els = $();
    }else {
        $els = $els.add(this);
    }
});
$els.wrapAll('<div class="container" />');

Demo: Fiddle