5509

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

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

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

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

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

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

jQueryライクなDOMにスタイルを適用する関数

jQueryは.css()を使えば、まるでCSSを書いているかのようにスタイルを適用できて便利ですよね。jQueryを使わない場合でも同じように書けるととても便利なので、いつも以下みたいな関数を用意してます。

// Set Styles
function set_styles(elm, hash) {
  for( var c in hash ) {
    elm.style[c] = hash[c];
  }
}

これさえあれば、あとは簡単

set_styles(element, {
  margin: '5px 0 5px 5px',
  width: '100px',
  height: '100px',
  fontSize: '14px'
});

こんな感じにjQueryの.css()と同じように(ちょっと違うけど)書けます。便利。

Author

nori
nori
- UI Engineer
Location
- ,