这是我在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>
答案 0 :(得分:2)
正如上面的评论中指出的那样,第一个例子与其他例子不同,因为当指定的孩子都是直接的后代时,那么共同父母中的所有孩子都应该被包裹。
使用此逻辑,以下解决方案可以正常工作。
jQuery.fn.myWrap = function(options) {
var e = this;
// find most nested
var max = null;
var $mostNested = null;
$(e).each(function(i, elem) {
var parents = $(elem).parents().length;
if (parents > max || max == null) {
max = parents;
$mostNested = $(elem);
}
})
// find common parent
var found = false;
$parent = $mostNested.parent();
while($parent != null && !found) {
if ($parent.find(e).length == e.length) {
// Right Level
found = true;
var toWrap = [];
var numDirect = 0;
$.each($parent.children(), function(i, item) {
var direct = $(e).index(item) >= 0;
var sibling = $(item).find(e).length > 0;
if (direct) numDirect++;
if (direct || sibling) toWrap.push(item);
})
if (numDirect == e.length) {
// All direct! (Example 1)
$parent.children().wrapAll("<div class='wrapper'></div>");
} else {
// Other Examples
$(toWrap).wrapAll("<div class='wrapper'></div>");
}
}
$parent = $parent.parent();
}
};
$(document).ready(function() {
// Example 1
$('#elementB, #elementE').myWrap();
// Example 2
//$('#elementD, #elementE').myWrap();
// Example 3
//$('#elementD, #elementC, #elementA').myWrap();
// Example 4
//$('#elementD, #elementF').myWrap();
})
请参阅my fiddle。