Search code examples
javascriptjquerytraversalsiblings

wrapall direct sibling classes into their own divs

I want to wrap direct sibling groups of classes starting by 'ok' into their own http://jsfiddle.net/7hABQ/12/

<div class="foo"></div>
<div class="ok-4"></div>
<div class="ok-87"></div>
<div class="ok-11"></div>
<div class="bar"></div>
<div class="baz"></div>
<div class="ok-5a4"></div>
<div class="ok-12"></div>
<div class="bim">iii</div>

into this:

<div class="foo"></div>
<div id="wrapper">
    <div class="ok-4"></div>
    <div class="ok-87"></div>
    <div class="ok-11"></div>
</div>
<div class="bar"></div>
<div class="baz"></div>
<div id="wrapper">
    <div class="ok-5a4"></div>
    <div class="ok-12"></div>
</div>
<div class="bim">iii</div>
Solution

  • One possible solution:

    $(':not(div[class^="ok"]) + div[class^="ok"]').each(function() {
    $(this).nextUntil(':not(div[class^="ok"])')
           .addBack()
           .wrapAll('<div class="wrapper"></div>');
});

    DEMO: http://jsfiddle.net/7hABQ/18/