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()andwrapAll()将内部 div 与一个共同的父对象分组：

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

jsFiddle在这里。

Answer 2

尝试这个：

$('.outerDiv').each(function() {
    $(this).append( $('<div class="innerDivBox"></div>').append( $(this).find('.innerDiv') ) );
});