3

これは、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>
4

1 に答える 1

2

上記のコメントで指摘したように、最初の例は、指定された子がすべて直接の子孫である場合、共通の親のすべての子をラップする必要があるという点で他の例とは異なります。

このロジックを使用すると、次のソリューションが機能します。

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

私のフィドルを参照してください。

于 2014-02-17T11:09:34.757 に答える