jquery - 在随机关卡中扭曲多个元素

Question

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

这里有一个例子：

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

例如，在#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

第一个问题：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 2

你不得不 ：

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

Answer 3

使用wrap和wrapInner

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

第一个场景演示

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

第二个场景演示

Answer 4

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

例如：

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

和其他方式。