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与一个共同父级分组：

$('.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') ) );
});

jQuery重新排列HTML Inside Div

2 个答案: