yuheijotaki.com

繰り返し 要素 最大値 取得

ulやdl使ったリストなどで、項目の横幅を決め打ちではなくテキストの横幅に合わせたいとき

 

htmlとしては

<ul id="hoge">
	<li><span>リスト</span></li>
	<li><span>リストリスト</span></li>
	<li><span>リストリストリスト</span></li>
</ul>

こんなんで

 

jsで

var this = $('#hoge li span'); // 取得先
var length = this.length;
array = new Array();
for (i=0; i<length; i++){
	var listWidth = this.eq(i).width(); // それぞれのwidthを
	array.push(listWidth); // 配列に追加してく
}
var num = array.indexOf(Math.max.apply(null,array)); // 最大値は配列の何番目かな
var maxWidth = this.eq(num).width(); // 何番目の要素を最大値として
this.css({'width':maxWidth+'px'}); // 全部のwidthを設定

 

なんか重そうだな−
IE8以下indexOfで引っかかるので下記も必要あれば