这是我在 stackoverflow 上的第一篇文章。到目前为止我总能在这里找到答案,但这次我找不到。
这是我的 DOM 结构:
<div id="elementA">
<div id="elementB"></div>
<div id="elementC">
<div id="elementD"></div>
</div>
<div id="elementE"></div>
</div>
如何将 2 个或更多选定的“随机”元素包装到包装容器中?如果所选元素位于不同级别并且中间有其他元素,这也应该有效。所有其他元素的 DOM 结构不应受到影响。
下面举几个例子:
示例1:
我想到了这样的事情:
var element1 = $('#elementB');
var element2 = $('#elementE');
??? $(element1, element2).myWrap(".wrapper"); ???
结果应该是这样的:
<div id="elementA">
<div class="wrapper">
<div id="elementB"></div>
<div id="elementC">
<div id="elementD"></div>
</div>
<div id="elementE"></div>
</div>
</div>
2 示例:
元素处于不同的级别。
var element1 = $('#elementD');
var element2 = $('#elementE');
??? $(element1, element2).myWrap(".wrapper"); ???
Result:
<div id="elementA">
<div id="elementB"></div>
<div class="wrapper">
<div id="elementC">
<div id="elementD"></div>
</div>
<div id="elementE"></div>
</div>
</div>
示例3:超过 2 个元素:
var element1 = $('#elementD');
var element2 = $('#elementC');
var element3 = $('#elementA');
??? $(element1, element2, element3).myWrap(".wrapper"); ???
<div class="wrapper">
<div id="elementA">
<div id="elementB"></div>
<div id="elementC">
<div id="elementD"></div>
</div>
<div id="elementE"></div>
</div>
</div>
示例4:不同的树:
var element1 = $('#elementD');
var element2 = $('#elementF');
??? $(element1, element2).myWrap(".wrapper"); ???
<div id="elementA">
<div id="elementB"></div>
<div class="wrapper">
<div id="elementC">
<div id="elementD"></div>
</div>
<div id="elementE">
<div id="elementF"></div>
</div>
</div>
</div>