.css()や.addClass()などの引数に関数を使う

.css()や.attr()などjQueryではおなじみのメソッドですが、引数に関数を使うことができ、その返り値を値として設定できることを知りました。jQuery1.4からの機能らしく…今更すぎますが(;´∀`)

実際に使ってみるとどんな感じか試してみました。

DEMO
DEMOではjQuery3.2.1を使いましたが、1.xでも使えます。

AD

.css()の引数に関数を使う

以下の例は.itemのwidthを50px,100px,150px…と増やして設定する例です。
引数の「index」は.itemのインデックス番号となります。0はじまりになる点を注意しましょう。

.css()のほか、.attr()や.prop()でも同様の記法が可能です。

.addClass()の引数に関数を使う

.addClass()でも上記の.css()と同様に関数を使うことができます。
以下の例は.item0,.item1,.item2…と連番のクラスを設定する例です。

.html()の引数に関数を使う

以下の例はページのtitleを.item内に出力する例です。

.html()のほか、.text()でも使えます。

.val()の引数に関数を使う

以下の例はinput[type="text"]のvalueにユーザーエージェントを設定する例です。

実践的な使い所

いずれにしても.each()でええやん…となりそうな処理ですが、.each()の中で.each()を回してさらに…とループの入れ子地獄を防ぐことができます。
.each()を多用するよりも見通しのよいコードになります…多分。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。