jQuery包含多个独立于level的元素

这是我在stackoverflow上的第一篇文章。 到目前为止，我总能找到答案，但这次我不能。

这是我的DOM结构：

如何将2个或更多选定的“随机”元素包装到包装容器中？ 如果所选元素位于不同级别并且其间存在其他元素，那么这也应该有效。 更新：不应影响所有其他元素的DOM结构。

举几个例子：

---

例1：

我虽然喜欢这样的东西：

 var element1 = $('#elementB'); var element2 = $('#elementE'); ??? $(element1, element2).myWrap(".wrapper"); ??? 

结果应如下所示：

---

2示例：

元素处于不同的层次。

 var element1 = $('#elementD'); var element2 = $('#elementE'); ??? $(element1, element2).myWrap(".wrapper"); ??? 

结果：

---

示例3：超过2个元素：

 var element1 = $('#elementD'); var element2 = $('#elementC'); var element3 = $('#elementA'); ??? $(element1, element2, element3).myWrap(".wrapper"); ??? 
 
 
 
 
 
 
 
  

---

示例4：不同的树：

 var element1 = $('#elementD'); var element2 = $('#elementF'); ??? $(element1, element2).myWrap(".wrapper"); ??? 
 
 
 
 
 
 
 
 
 
  

谢谢你的帮助提前。

Answer 1

正如上面的评论中所指出的，第一个例子与其他例子不同，因为当指定的孩子都是直接的后代时，那么共同父母中的所有孩子都应该被包裹。

使用此逻辑，以下解决方案有效。

 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("
"); } else { // Other Examples $(toWrap).wrapAll("
"); } } $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(); }) 

看我的小提琴 。