javascript - jQuery 重新排列 Div 内的 HTML

Question

我有这样的 HTML -

<div class="outerDiv" id="od_1">
    <label>Div 1</label>
    <div class="innerDiv">Inner Div 1</div>
    <div class="innerDiv">Inner Div 2</div>
    <div class="innerDiv">Inner Div 3</div>
</div>
<div class="outerDiv" id="od_2">
    <label>Div 2</label>
    <div class="innerDiv">Inner Div 1</div>
    <div class="innerDiv">Inner Div 2</div>
    <div class="innerDiv">Inner Div 3</div>
</div>

我想通过jQuery实现的就是这个 -

<div class="outerDiv" id="od_1">
    <label>Div 1</label>
    <div class="innerDivBox">
        <div class="innerDiv">Inner Div 1</div>
        <div class="innerDiv">Inner Div 2</div>
        <div class="innerDiv">Inner Div 3</div>
    </div>
</div>
<div class="outerDiv" id="od_2">
    <label>Div 2</label>
    <div class="innerDivBox">
        <div class="innerDiv">Inner Div 1</div>
        <div class="innerDiv">Inner Div 2</div>
        <div class="innerDiv">Inner Div 3</div>
    </div>
</div>

我首先使用“outerDiv”类循环遍历 div -

$('.outerDiv').each(function(i, obj) {
     var divId = this.id;                    
}); 

但我不确定我应该如何从这里开始。任何帮助，将不胜感激。谢谢。

Answer 1

您可以使用 find() 和 wrapAll() 将内部 div 与公共(public)父级分组:

$('.outerDiv').each(function(i, obj) {
    $(this).find('.innerDiv').wrapAll('<div class="innerDivBox">');
});

jsFiddle here.