jQuery包装独立于级别的多个元素 [英] jQuery wrap multiple elements independent of level

问题描述

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

This is my first post on stackoverflow. So far I could always find an answer here, but this time I couldn't.

这是我的DOM结构:

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

如何将2个或多个选定的随机"元素包装到包装容器中?如果所选元素处于不同级别，并且介于两者之间，则这也应该起作用.所有其他元素的DOM结构都不应受到影响.

How can I wrap 2 or more selected "random" elements into a wrapper container? This should also work if the selected elements are on different level and if there are other elements in between. The DOM structure of all other elements shouldn't be effected.

下面是几个例子:

示例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个元素:

---

Example 3: More than 2 elements:

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:不同的树:

---

Example 4: Different trees:

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>

推荐答案

如上面的注释所指出的，第一个示例与其他示例不同，当指定的子代都是直接后代时，则子代中的所有子代都将成为子代.普通父母应该包装.

As was pointed out in the comments above, the first example is different to the others in that when the specified children are all direct decendants, then all children in the common parent should be wrapped.

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

Using this logic, the following solution works.

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包装独立于级别的多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！