jQuery - チェーン

❮ 前章へ 次章へ ❯

jQuery により、アクション/メソッドを一つのチェーンにすることができます。

チェーンは、ひとつのステートメントで、同じ要素に対して複数の jQuery メソッドを実行することができます。


jQuery メソッド・チェーン

これまでは、jQuery ステートメントを一つずつ(順々に)書いていました。

しかし、同じ要素に対して複数の jQuery コマンドを次々に実行することができる、チェーンという技術があります。

チップ: この方法によれば、ブラウザは 2 回以上同じ要素を検索する必要はありません。

アクションをチェーンするには、前のアクションに続けてアクションを追加するだけです。

次の例は、css()、slideUp()、slideDown() メソッドを一つにチェーンしています。 "p1" 要素は、最初に赤色に変わり、上にスライドした後、下にスライドします:

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
Try it Yourself »

必要に応じて、より多くのメソッド呼び出しを追加することもできます。

チップ: チェーンした場合、コードの行が長くなる時があります。 しかし、jQuery の構文はあまり厳格ではありません: 改行やインデントをを使い、好きなフォーマットにすることができます1.

これも問題なく動作します:

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);
Try it Yourself »

jQuery は、余分な空白を捨て、1 行の長いコードとして上の行を実行します。


❮ 前章へ 次章へ ❯