jquery - 将元素包裹在div中并根据标签添加类

Question

这是我的标记，它是从 CMS 生成的，我根本无法用它做太多事情。

<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>

我想在每个 dt 和 dd 周围包裹一个 div。我还希望 div 有一个标签类，用连字符或下划线替换空格。

看看第一个 dl，我希望它看起来是这样的。

    <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>

这就是我得到的。它每隔一个 dt/dd 对包裹一个 div。我还没有向 div 添加类名。

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

哦，它还没有经过测试，但我现在就会。应该接近它。

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

我觉得不错。