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

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() + '">');
    });
});