5509

jQueryのappendパターン

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

jQueryオブジェクト

まあ普通はこれですよ。

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

とか極端な例だけど

$("#hoge").append(
  $("
") .append( $("") .attr("href", fuga) .text(piyo) ) );

みたいなの

HTML要素

これもあるある。

$("#hoge").append(
  "
fugafuga
" );

HTML要素少し多い場合

ちょっと見にくい。

$("#hoge").append(
  "
\

piyo

\

fungaaaaaaa

\
" );

上のパターンを配列で

割とみやすい。

$("#hoge").append([
  "
", "

piyo

", "

fungaaaaaaa

", "
" ].join(""));

functionで要素を返す

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

$("#hoge").append(function() {
  var elm = $("
    "), li = []; for ( var i = 0; i < l; i++ ) { li.push( "
  • " + fuga + "
  • " ); } 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
    - ,