jQuery包裝多個獨立於級別的元素

Question

這是我在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> 

感謝您的幫助提前。

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("<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。