5509

Site Search

いつappendされるか分からないDOMノードを監視して何かする

最後の手段として使える場合があります。最後の手段です。
プラグインとか使いまくってると(そもそも挙動を理解していないプラグインを使いまくるのはよくないので、注意したほうがいいです)、「プラグインで生成したノードがDOMツリーに追加された後なんかしたい」みたいなときがあったりするかもしれないですが、そういうときになんとかする方法です。

jQuery使ってないときは$(“object”)をquerySelectorとかに変えます。

var object = undefined;
(function() {
    object = $("object");
    if ( object && object.length > 0 ) {
        // ここに処理書く
        return;
    }
    setTimeout(arguments.callee, 30);
}());

上の例だと、objectを監視し続けてほしい個数分取れたときに何かするっていう感じです。取れないときは取れるまでループし続けるので、アレですアレ。。前もって、コンソールからほしい要素が最終的に挿入されてるかどうか見てからにしましょう。

自分で書いたコードならカスタムイベント入れとくと、後で使うときに楽ですね。つまりプラグイン使うとノードの生成タイミングとか自分で把握できなくなるので、気をつけたほうがいいです。

jQueryのappendパターン

appendで追加するあれやこれのパターン。別に珍しいことないですよくある光景です。appendだけじゃなくてhtmlとかafterとかそゆのでも使えます。まあ何で使えるかっていうのはjQueryのドキュメント見てください

jQueryオブジェクト

まあ普通はこれですよ。

var hoge = $("#hoge");
$("#fuga").append(hoge);

とか極端な例だけど

$("#hoge").append(
  $("<div></div>")
    .append(
      $("<a></a>")
        .attr("href", fuga)
        .text(piyo)
    )
);

みたいなの

HTML要素

これもあるある。

$("#hoge").append(
  "<div>fugafuga</div>"
);

HTML要素少し多い場合

ちょっと見にくい。

$("#hoge").append(
  "<div class='fuga'>\
    <h3>piyo</h3>\
    <p>fungaaaaaaa</p>\
  </div>"
);

上のパターンを配列で

割とみやすい。

$("#hoge").append([
  "<div class='fuga'>",
    "<h3>piyo</h3>",
    "<p>fungaaaaaaa</p>",
  "</div>"
].join(""));

functionで要素を返す

これあんまり使ってないと思いますけど超便利なんですよ。
中でたくさん作ってまとめて返したり、条件分岐で返したり夢が広がります。

$("#hoge").append(function() {
  var elm = $("<ul></ul>"), li = [];
  for ( var i = 0; i < l; i++ ) {
    li.push(
      "<li>" + fuga + "</li>"
    );
  }
  return elm.append(li.join(""));
});

そんな感じで

最後のやつも積極的に使うといいと思います。

Skroll.jsのマイナーアップデート

OS X Lionぽいスクロールバーを実装できてiOSにも対応した Skroll.js

アップデート項目

  • added: refresh()メソッドの実装
  • added: スクロールバーの背景を表示する
  • bugfix: スクロールバーの高さ
  • bugfix: スクロール量
  • bugfix: スクロールコンテンツが少し余る
  • modifed: iOSでのモーメンタムスクロールのスクロール量、easingの調整

使い方などはSkrollのアーカイブに追記してます。

Author

nori
nori
- UI Engineer
Location
- 35.671643, 139.710752