Javascript jQuery独立于级别包装多个元素

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

以下是我的DOM结构：

<div id="elementA">
    <div id="elementB"></div>
    <div id="elementC">
         <div id="elementD"></div>
    </div>
    <div id="elementE"></div>
</div>

结果应该如下所示：

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>

结果:

<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:两个以上的元素：

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>

var element1=$（'#elementD'）；
var element2=$（“#elementC”）；
var element3=$（“#elementA”）；
??? $（元素1、元素2、元素3）.myWrap（“.wrapper”）？？？

---

示例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>

var element1=$（'#elementD'）；
var element2=$（“#elementF”）；
??? $（元素1，元素2）.myWrap（“.wrapper”）？？？

正如上面的评论所指出的，第一个示例与其他示例的不同之处在于，当指定的子对象都是直接的decentant时，那么公共父对象中的所有子对象都应该被包装

使用此逻辑，以下解决方案可以工作

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();
})

jQuery.fn.myWrap=函数（选项）{
var e=此；
//查找最嵌套的
var max=null；
var$mostNested=null；
$（e）.每个（功能（i，元素）{
var parents=$（elem）.parents（）.length；
如果（父项>最大值| |最大值==null）{
max=父母；
$mostNested=$（elem）；
}
})
//查找公共父项
var=false；
$parent=$mostNested.parent（）；
而（$parent！=null&！找到）{
if（$parent.find（e.length==e.length）{
//右水平
发现=真；
var-toWrap=[]；
var numDirect=0；
$.each（$parent.children（），函数（i，项）{
直接风险值=$（e）.指数（项目）>=0；
变量同级=$（项）.find（e）.length>0；
if（direct）numDirect++；
如果（直接| |同级）拖拉。推拉（项目）；
})
if（numDirect==e.length）{
//全部直接！（示例1）
$parent.children（）.wrapAll（“”）；
}否则{
//其他例子
美元（toWrap）.wrapAll（“”）；
}
}
$parent=$parent.parent（）；
}
};
$（文档）.ready（函数（）{
//例1
$（'#elementB，#elementE'）.myWrap（）；
//例2
//$（'#elementD，#elementE'）.myWrap（）；
//例3
//$（'#elementD，#elementC，#elementA'）.myWrap（）；
//例4
//$（'#elementD，#elementF'）.myWrap（）；
})

---

请参阅。

我想不出您要执行的算法。现在，当您调用wrap on和E时，您也可以在C中循环。但在另一个例子中，当你在D和E上调用wrap时，你不会在B中循环。这是相同的情况，在兄弟中循环，但在一个例子中，它的行为不同。如果你知道一种调和的方法，那么它是可以解决的。好吧，我试着用一个包装器将DOM中出现的2个元素包装起来。也就是说，如果它们出现在不同的树中，那么包装器应该位于第一个公共外部树中。这有意义吗？我将添加另一个示例。您的示例仍然没有阐明为什么在示例1中，包装器包装兄弟，但在示例2中，它没有。在示例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();
})