在随机关卡中扭曲多个元素答案

【问题标题】：Warp multiple elements in random levels在随机关卡中扭曲多个元素
【发布时间】：2023-03-02 21:20:02
【问题描述】：

我有点卡住了... 如何在组合 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>

【问题讨论】：

$('#item2, #item5').myWrap() 会是什么样子？
请看我更新的评论。

标签： jquery wrapall

【解决方案1】：

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

例如：

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

还有其他方式。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

使用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

【讨论】：

谢谢，但我可能还不够清楚。请查看我更新的问题。
在他的第一个问题中#item5 在组合之外
@Mayko：我在回答时互换了位置。修复。现在应该好了。

【解决方案4】：

你必须：

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

【讨论】：