【jQuery】wrapAllした親要素にappendできない＆解決記

プログラミング

以下のような、何の変哲もない段落があるとします。



HTML:

<p id="p1">hoge!</p>


これに、赤地のボックスを親要素として追加し、さらに別の段落を
追加して、以下のように表示するとします。



HTML:

<div style="background-color:#fcc;">

    <p id="p1">hoge!</p>

    <p id="p2">fuga!</p>

</div>


これをjQueryで行う場合、下記のようなコードが考えられます。
しかし、これでは意図した表示結果になりません。



(例1):失敗

jQuery(document).ready(function($){

    var $div = $('<div style="background-color:#fcc;" />');

    $('#p1').wrapAll($div);

    $('<p id="p2">fuga!</p>').appendTo($div);

});


正しくは、下記でした。



(例2):成功

jQuery(document).ready(function($){

    var $div = $('<div style="background-color:#fcc;" /;>');

    $div = $('#p1').wrapAll($div).parent();

    $('<p id="p2">fuga!</p>').appendTo($div);

});



追記(2010年1月6日)

  1. wrapAllでは、包む側の要素は『clone()』でコピーされ、

    そのコピーを用いて対象を包みます。

    ですから、(例1)のコピー元の『$div』は、いまだにドキュメント中の

    どこにも所属していない状態なのです。

  2. wrapAllで返されるのは、包まれる側の要素です。

    ですから、(例2)のように『parent()』で親を指定する必要が

    あります。



jquery-1.3.2.js (219行目〜238行目):

    wrapAll: function( html ) {

        if ( this[0] ) {

            // The elements to wrap the target around

            //1. ↓コピーが作られ、そちらが使用される

            var wrap = jQuery( html, this[0].ownerDocument ).clone();
            if ( this[0].parentNode )

                wrap.insertBefore( this[0] );
            wrap.map(function(){

                var elem = this;
                while ( elem.firstChild )

                    elem = elem.firstChild;
                return elem;

            }).append(this);

        }

        //2. ↓『hoge.wrapAll(fuga);』の場合、hogeが返される

        return this;

    },