【Javascript】.css()や.addClass()などの引数に関数を使う | Wood-Roots:blog

2017
04/25

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

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

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

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

ADs

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

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

1
2
3
4
5
6
$('.module_1st .result .item').css(
'width',
function(index){
return (index+1)*50 + 'px';
}
);

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

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

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

1
2
3
4
5
$('.module_2nd .result .item').addClass(
function(index){
return 'item' + index;
}
);

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

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

1
2
3
4
5
6
$('.module_3rd .result .item').html(
function(){
var title = $('title').text();
return 'このページのタイトルは' + title + 'です';
}
);

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

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

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

1
2
3
4
5
6
$('.module_4th .result input[type="text"]').val(
function(){
var ua = window.navigator.userAgent;
return ua;
}
);

実践的な使い所

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//たとえば以下のような.each()*2が…
$('.module').each(function(key,value){
$(value).find('.item').each(function(key2,value2){
$(value2).addClass('item' + key2);
});
});
 
//↓こうなる！
 
$('.module').each(function(key,value){
$(value).find('.item').addClass(function(index){
return 'item' + index;
});
});

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

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

Category

Archive

Search

Social