JQuery Перестановка HTML Внутри Div

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> 

Я начал со сквозными через DIV с классом "outerDiv" -

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

Но я не уверен, как именно я должен исходить отсюда. Любая помощь будет оценена по достоинству. Благодарю.

Answer 1

Вы можете использовать find() и wrapAll() сгруппировать внутренние дивы с общим родителем:

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

jsFiddle here.

Answer 2

Попробуйте это:

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