Wrap elements in div and add class based on label

Question

Here is my markup, it's generated from a CMS and I can't do much with this at all.

<div id="wrapper">
<dl>
    <dt>
        <label>Awesomeness<span class="required"> *</span></label>
    </dt>
    <dd>Something here</dd>

    <dt>
        <label>Label Here</label>
    </dt>
    <dd>Something here</dd>
</dl>

<dl>
    <dt>
        <label>Awesomeness<span class="required"> *</span></label>
    </dt>
    <dd>Something here</dd>

    <dt>
        <label>Label Here</label>
    </dt>
    <dd>Something here</dd>

    <dt>
        <label>Here is another label<span class="required"> *</span></label>
    </dt>
    <dd>Something here</dd>
</dl>
</div>

I want to wrap a div around each dt and dd. I also want the div to have a class of the label, replacing spaces with a hyphen or underscore.

Looking at the first dl, here's how I'd like it to look.

    <dl>
    <div class="awesomness">
        <dt>
            <label>Awesomeness<span class="required"> *</span></label>
        </dt>
        <dd>Something here</dd>
    </div>

    <div class="label-here">
        <dt>
            <label>Label Here</label>
        </dt>
        <dd>Something here</dd>
    </div>
</dl>

Here's what I got. It wraps a div around every other dt/dd pair. I doesn't add a class name to the div yet either.

jQuery('#wrapper dl').each(function(){
    jQuery(this).addClass('testing');
});

var dts = jQuery("dt");
for(var i=0; i<dts.length;){
    i += dts.eq(i).nextUntil('dt').andSelf().wrapAll('<div />').length;
}

Answer 1

$('dl').each(function() {
  $(this).children('dt').each(function() {
     var $dt = $(this),
         $dd = $dt.next('dd');

     if($dd.length) {
        $dt.add($dd).wrapAll('<div class="' + $dt.children('label').contents().first().text() + '">');
     }
  });
});

Doh it's untested, but I will right now. Should get close to it.

http://www.jsfiddle.net/AKpv2/

Looks good to me.

Answer 2

jAndy comes close, I think. He's missing the class names and a little sanitation:

$(document).ready(function() {
    $('dt').each(function() {
        var $dt = $(this),
            $selection = $dt.next('dd').andSelf();

        $selection.wrapAll('<div class="' + $dt.find('label').text().replace(/[^a-z]/gi,'').toLowerCase() + '">');
    });
});