Grouping Repeaters

Method of grouping repeaters and their cloned nodes

by adrianlynch

HTML

<div id="aa" class="repeat">
    <p>AA</p>
</div>
<div id="bb" class="removeable">
    <p>BB</p>
</div>
<div id="cc" class="removeable">
    <p>CC</p>
</div>
<div id="dd" class="repeat">
    <p>DD</p>
</div>
<div id="ndd" class="nothing">
    <p>NDD</p>
</div>
<div id="ee" class="repeat">
    <p>EE</p>
</div>
<div id="ff" class="removeable">
    <p>FF</p>
</div>
<div id="gg" class="removeable">
    <p>GG</p>
</div>
<div id="hh" class="nothing">
    <p>HH</p>
</div>
<div id="ii" class="nothing">
    <p>II</p>
</div>

CSS

div {
    border: 1px solid #ccc;
    padding: 10px;        
}

.repeat {
background-color: #ccffff;               
}

.removeable {
    background-color: #ffffcc;
}

.repeatgroup {
    border: 1px solid #ff0000;
}

JavaScript

var split_at = '.repeat';
var include_elements = '.removeable';
$(split_at).each(function() {
    $(this).add($(this).nextUntil(split_at, include_elements)).wrapAll('<div class="repeatgroup"/>');
});