0

HTML

<div>
 <span class="openParen bm0">(</span>
 <span class="closeParen bm0">)</span>
 <span class="openParen bm3">(</span>
 <span class="openCurly bm1">{</span>
 <span class="openParen bm2">(</span>
 <span class="closeParen bm2">)</span>
 <span class="closeParen bm3">)</span> 
 <span class="closeCurly bm1">}</span>
</div>

更新 我希望<span class="new"></span>使用 bm 类名成对包装它，我只想用 Paren 包装它们的类名

未正确包装

<div>
  <div>if<span class="openParen bm1">(</span>b<3 && b>0<span class="closeParen bm1">)</span>{</div>
</div>
4

2 回答 2

1

您可以使用.wrapAll()并使用bm0类来选择元素

var ops = /(==|<=|>=|!=|>|<)/,
    prev = /(if|else\s+if|while|for)/;
$('.openParen').each(function () {
    var bm = this.className.match(/\b(bm\d+)\b/)[1],
        $this = $(this),
        $close = $('.closeParen.' + bm);

    var $set = $(this),
        next = this.nextSibling;
    while (next) {
        $set = $set.add(next);
        if ($close.is(next)) {
            break;
        }
        next = next.nextSibling;
    }

    if (ops.test($set.text())) {
        var prevEl = this.previousSibling;
        var $span = $set.wrapAll('<span class="new"></span>').parent();
        if (prevEl && prevEl.nodeType == 3 && prev.test($(prevEl).text())) {
            $span.prepend(prevEl)
        }
    }
})

演示：小提琴

于 2013-09-03T08:02:15.210 回答
0

这段代码应该可以解决问题：

$.each($('.openParen'), function(index, startParen){
    var classes = $(startParen).attr('class').split(' ');
    var bmClass = $.grep(classes, function(thisElement, index){
        return thisElement.toString().match("^bm");
    });
    $(startParen).nextUntil($('.' + bmClass[0])).andSelf().add($('.' + bmClass[0] +     ':last')).wrapAll('<span class="new"></span>');
});

解释 ：

  1. 选择所有具有“openParen”类的元素。

  2. 遍历此列表并获取每个关联的“.bm”类。

    var bmClass = $.grep(classes, function(thisElement, index){
        return thisElement.toString().match("^bm");
    });

  3. 此代码获取以关键字“bm”开头的类名。

  4. 现在从当前元素开始选择所有元素，直到下一个具有所需“bm”类的元素。

    $(startParen).nextUntil($('.' + bmClass[0]))

  5. 添加当前和最终的“bm”元素，因为 jquery nextUntil() 不会将它们添加到包装集中。

    $(startParen).nextUntil($('.' + bmClass[0])).andSelf().add($('.' + bmClass[0] + ':last'))

  6. 用标签包装集合。

    $(startParen).nextUntil($('.' + bmClass[0])).andSelf().add($('.' + bmClass[0] + ':last')).wrapAll('<span class="new"></span>');

  7. 就是这样。现在，您的 span 带有“paren”关键字，很好地包裹在带有“new”类的外部 span 中。也根据其相应的“bm”类进行分组。

  8. 现在我们需要做的就是在 dom load 事件中包含这段代码，我们就完成了。
于 2013-09-09T12:04:37.707 回答