$(fuga).wrap($boga)した後$bogaに何かしても反映されない

タイトルだけやとよくわからんですが・・・

wrap()メソッドは全然使ったことがなくて、なんとなく使ってみたらうっかりはまった例です。よくよく考えたらその通りなのでただのうっかりです・・・

wrap()メソッドについて

一応ふれておくとwrap()メソッドを使うと、対象のjQueryオブジェクトを指定したタグか要素で包めます。

$(boga).wrap("<div></div>");

とかすると

<div>boga</div>

になります。このwrapする要素はタグではなくてjQueryオブジェクトでも大丈夫なんですけど、

何がだめなのか

var $boga = $("<div></div>");
// これは大丈夫
$boga.method(/* something */);

$(fuga).wrap($boga);

// これはだめ
$boga.method(/* something */);

結論から言うと、次みたいに$hogeを再取得しないとだめです。（そもそもreplaceWithとかのほうがいいかもとかは置いといて）

var $boga = $("<div></div>");
// これは大丈夫
$boga.method(/* something */);

// wrapした後、親に移動してそれを $hoge に返す
// つまり元の$hogeを再取得する
$boga = $(fuga).wrap($boga).parent();

// これも当然大丈夫
$boga.method(/* something */);

何がどうなってるの

wrap()メソッド自体はほぼそのままwrapAllに渡してるだけなんですけど

wrap: function( html ) {
    return this.each(function() {
        jQuery( this ).wrapAll( html );
    });
}

下にコメントで書いたように、wrapAll()メソッドでwrapする要素はclone()メソッドで複製したものなので、元の$bogaにあれやこれやしようとしても、そもそも$bogaでwrapされているわけではないのでどうしようもない、ということでした。

wrapAll: function( html ) {
    // 略

    if ( this[0] ) {
        // The elements to wrap the target around
        var wrap = jQuery( html, this[0].ownerDocument ).eq(0).clone(true);
        // ↑ 実際に追加されるのは html ではなく html を複製したもの

        if ( this[0].parentNode ) {
            wrap.insertBefore( this[0] );
            // ↑ 複製したものを追加している
        }

        wrap.map(function() {
            // 略
        }).append( this );
    }

    return this;
}

カレー

たべたい