jQuery包装多个独立于级别的元素答案

【问题标题】：jQuery wrap multiple elements independent of leveljQuery包装多个独立于级别的元素
【发布时间】：2014-03-14 13:06:49
【问题描述】：

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

【问题讨论】：

我无法弄清楚您尝试执行的算法。现在，当你调用 wrap on 和 E 时，你也在 C 中循环。但是在另一个示例中，当您在 D 和 E 上调用 wrap 时，您不会在 B 中循环。情况相同，在同级中循环，但在一种情况下它的行为不同。如果你知道一种调和的方法，那么它是可以解决的。
好的，我正在尝试用一个包装器包装 2 个元素出现在 DOM 中的任何位置。这意味着，如果它们出现在单独的树中，则包装器应该位于第一个公共外部树中。那有意义吗？我将添加另一个示例。
您的示例仍然没有说明为什么在示例 1 中，包装器包装了兄弟，但在示例 2 中，它没有。兄弟姐妹需要始终包装，或者您需要在示例 1 中有两个包装器。目前的结果似乎是随机的，而且随机性很难编程。
在我看来，作者试图找到这些元素层次结构的“最大共同因素”；他们共同拥有的第一个父级 - 并在他们周围和该父级内部插入包装器。
没错，迈克。谢谢你说清楚。

标签： javascript jquery wrapall

【解决方案1】：

正如上面的 cmets 所指出的，第一个示例与其他示例的不同之处在于，当指定的孩子都是直接后裔时，应该包裹共同父母中的所有孩子。

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

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。

【讨论】：