Question

我有点卡住...... 如何在组合div中的不同级别上包装DOM元素的集合？

这是一个例子：

<div id="item1">
    <div id="item2"></div>
    <div id="item3">
        <div id="item4"></div>
    </div>
    <div id="item5"></div>
</div>

e.g。 #COMBO中的＃item2和＃item4包装应如下所示：

<div id="item1">
    <div id="COMBO">
        <div id="item2"></div>
        <div id="item3">
             <div id="item4"></div>
        </div>
    </div> 
    <div id="item5"></div>
</div>

或＃item1和＃item2以及＃item4等任何其他随机选择器应如下所示：

<div id="COMBO">
     <div id="item1">
        <div id="item2"></div>
        <div id="item3">
             <div id="item4"></div>
        </div>
        <div id="item5"></div>
    </div> 
</div>

我需要能够选择多个元素，如$（“＃item2，＃item4”）或$（“＃item1，＃item2，＃item4”），其间的所有项都应包含在包装器中。

@LeGEC

选择器：

$('#item2, #item5').myWrap();

结果：

<div id="item1">
    <div id="COMBO">
        <div id="item2"></div>
        <div id="item3">
             <div id="item4"></div>
        </div>
        <div id="item5"></div>
    </div>
</div>

这个例子应该说清楚：

选择器：

$('#item4, #item5').myWrap();

结果：

<div id="item1">
    <div id="item2"></div>
    <div id="COMBO">
        <div id="item3">
             <div id="item4"></div>
        </div>
        <div id="item5"></div>
    </div>
</div>

Answer 1

使用wrap和wrapInner

 $( "#item1" ).wrapInner( "<div id='COMBO'></div>" );//for firstscenario

First Scenario Demo

$( "#item1" ).wrap( "<div id='COMBO'></div>" );//for second scenarion

<强> Second Scenario Demo

Answer 2

使用https://api.jquery.com/wrap/。

例如：

$('#item1').wrap('<div id="COMBO"></div>');

等方式。

Answer 3

第一个问题：http://jsfiddle.net/aamir/MSdQ7/

因此，如果要将提供的选择器包装在一个元素中，则可以使用wrapAll。

$('#item2, #item3').wrapAll('<div id="COMBO"></div>');

第二个问题：http://jsfiddle.net/aamir/MSdQ7/1/

这会将＃item1及其所有内容包装在一个元素中

$('#item1').wrap('<div id="COMBO"></div>')

将每个项目包装在自己的组合中：http://jsfiddle.net/aamir/MSdQ7/3/

这会将每个项目包装在自己的元素中

$('#item2, #item3, #item4').wrap('<div id="COMBO"></div>')

看看所有这些：https://api.jquery.com/?s=wrap

Answer 4

你必须：

寻找最近的共同祖先，
选择此祖先内的相关子项
将这些孩子包裹在包装内。

以随机级别扭曲多个元素

4 个答案: