这是我在 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"); ???
结果:
<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>