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

jQueryのメソッドの中で、引数に関数を使うことができるメソッドがあります。
そのようなメソッドの実装例です。

ブログ記事はこちら

width()の返り値にfunction

元のHTML


<div class="item"></div>

Javascript


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

結果


<div class="item"></div>

addClass()の返り値にfunction

元のHTML


<div class="item"></div>

Javascript


$('.module_2nd .result .item').addClass(
	function(index){
		return 'item' + index;
	}
);

結果


<div class="item"></div>

html()の返り値にfunction

元のHTML


<div class="item"></div>

Javascript


$('.module_3rd .result .item').html(
	function(){
		var title = $('title').text();
		return 'このページのタイトルは「' + title + '」です';
	}
);

結果


<div class="item"></div>

val()の返り値にfunction

元のHTML


<input type="text" />

Javascript


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

結果


<input type="text" />