< span>包裹对具有类似的类名 [英] Wrap pair of <span> having similar class name
本文介绍了< span>包裹对具有类似的类名的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
CONTENTEDITABLE DIV 仅限示例字符
int main(){
if((x<3 && x!=5) || x>10)
//execute statement;
while((y<10) && (y>1))
//execute statement;
}
现有的DIV的HTML
<div id="board_code">
<div>int main<span class="openParen bm1">(</span><span class="closeParen bm1">)</span></div>
<div></div>
<div>if<span class="openParen bm2">(</span><span class="openParen bm3">(</span>x<3 && x!=5<span class="closeParen bm3">)</span> || x>10<span class="closeParen bm2">)</span></div>
<div>//execute statement;</div>
<div>while<span class="openParen bm4">(</span><span class="openParen bm5">(</span>y<10<span class="closeParen bm5">)</span> && <span class="openParen bm6">(</span>y>1<span class="closeParen bm6">)</span><span class="closeParen bm4">)</span></div>
<div>//execute statement;</div>
<div>}</div>
</div>
目标HTML
<div id="board_code">
<div>int main<span class="parenWrap"><span class="openParen bm1">(</span><span class="closeParen bm1">)</span></span></div>
<div></div>
<div>if<span class="parenWrap"><span class="openParen bm2">(</span><span class="parenWrap"><span class="openParen bm3">(</span>x<3 && x!=5<span class="closeParen bm3">)</span></span> || x>10<span class="closeParen bm2">)</span></span></div>
<div>//execute statement;</div>
<div>while<span class="parenWrap"><span class="openParen bm4">(</span><span class="parenWrap"><span class="openParen bm5">(</span>y<10<span class="closeParen bm5">)</span></span> && <span class="parenWrap"><span class="openParen bm6">(</span>y>1<span class="closeParen bm6">)</span></span><span class="closeParen bm4">)</span></span></div>
<div>//execute statement;</div>
<div>}</div>
</div>
我已经匹配了()
通过使用一对 bm1,bm2
等。现在,我需要包装 openParen bm(n)
到 closeParen bm(n)
with span class = parenWrap
I've already matched the ()
by having a pair of bm1, bm2
, etc.. Now, i need to wrap the openParen bm(n)
to closeParen bm(n)
with span class = parenWrap
如何实现?
简化
<span class="parenWrap">((x<3 && x!=5) || x>10)</span>
<span class="parenWrap">(x<3 && x!=5)</span>
<span class="parenWrap">((y<10) && (y>1))</span>
<span class="parenWrap">(y<10)</span>
<span class="parenWrap">(y>1)</span>
为了更容易理解,他们将变成这样,保留他们已经拥有的span标签
For easier understanding, they will become like this, retaining the span tags they already have
更新基于@ pdoherty926答案
UPDATE based from @pdoherty926 answer
逻辑类似于
//if i have 3 pairs of bm's
for(var xx=1; xx<4; xx++){
$('.openParen bm'+xx).nextUntil('.closeParen bm'+xx).andSelf().wrapAll('<span class="parenWrap"></span>');
}//for
但这不工作。
推荐答案
<div>
one
<span class="openParen bm1">(</span>
<span>sometext here</span>
<span class="closeParen bm1">)</span>
</div>
$('.openParen').each(function () {
$(this).nextUntil('.closeParen').andSelf().wrapAll('<span class="parenWrap"></span>');
});
这篇关于< span>包裹对具有类似的类名的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文