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

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

wrap()メソッドについて

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

$(boga).wrap("
");

とかすると

boga

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

何がだめなのか

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

$(fuga).wrap($boga);

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

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

var $boga = $("
");
// これは大丈夫
$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;
}

カレー

たべたい

画像がロードされるのを待って、高さを更新しないとだめです。ってどうしても毎回忘れててうっかり計算あわへんとかで時間潰してしまう・・・

下のようなHTMLがあって、

    

        
            
        
        
            Photo by Martin Gommel
        
    
    
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

コンテンツの高さを取得するには例えば

jQuery(function($) {
    var contentsHeight = $("div.txt").get(0).offsetHeight;
});

とかで取れるんですけど、画像にheight属性がないので、画像がロードされるとコンテンツの高さが変わってしまうんですね。なので、画像がある場合には、画像がロードされるのを待ってからもう一度取得しないとだめです。

画像のロード完了はnew Image().completeを使うんですけど、そこの説明ははしょってm5ImgLoadっていうの使ってます。ちょっと前に$(“img”).load()（img.onloadも同じ）だと画像の読み込み完了が取れないみたいなエントリを書いてやっぱり必要なかったとか書いてたのですけど、やはりIEだと取れないので、これ使ってます。

jQuery(function($) {
    var $txt = $("div.txt"),
        contentsHeight = $txt.get(0).offsetHeight,
        $images = $("img", $txt),
        imgLength = 0,
        imgLoaded = 0;

    if ( $images.length ) {
        imgLength = $images.length;
        $images.each(function() {
            $(this).m5ImgLoad(function() {
                imgLoaded += 1;
            })
        });

        (function() {
            if ( imgLoaded === imgLength ) {
                contentsHeight = $txt.get(0).offsetHeight;
                return;
            }
            setTimeout(arguments.callee, 30);
        }());
    }
});

なんか長くなりましたけど、height属性がない場合も多いので面倒ですけど気にしておかないとはまります・・・

ナビゲーション改善のために検索をAjaxにしてリアルタイムにできるようにしました。WordPressなら楽々実装できます。本当は誰でも簡単に使えるようにコピペできるような内容にしようと思ったりもしたんですけど、残念ながら面倒くさくなったので、僕がこのブログに実装したコードを貼るだけにします。そうです、これが手抜きです。

Read more

この前のLazyLoadの話で、LazyDisplayっていうのも作ったりしましたけど・・・

なるほど把握しました。こういうことですか？（某GAZINEから拝借）

というわけで例によってプラグインにしました。

スクロールしていくとフェードインで表示していくだけのプラグインです。本当にそれだけ。HTTPリクエスト減らすとか、ページロード早くなるとか一切ないです。スクロールしていったときにふわっと表示されるだけです。ちょっと注目ひきたいときに。

サンプル見てもらえば何となく伝わると思います

下記のエントリも併せてどうぞ（セットになってます）
スクロールするまで画像を読み込まない（はずの）Lazy Loadについて

ダウンロード

ダウンロードはgithubから

使い方とかをざっくりと

対象にしたい画像に実行するだけです。

$("img").m5LazyDisplay();

本当に

ただのエフェクトだけなんで