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

Doh它未经测试，但我现在就会。应该接近它。

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

对我来说很好。

Answer 2

我认为jAndy接近了。他错过了班级名称和一点点卫生设施：

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

在div中换行元素并根据标签添加类

2 个答案: