要素の幅サイズをすべて取得する方法のメモ【jQuery】

要素の幅を取得したい時に、jQueryではwidth()でその要素の幅を取得することができます。(時と場合によっては、outerWidth()やinnerWidth()を使います。)

例えばですが、下記図のようなトピックパスのリスト(li要素でマークアップした場合)の幅を取得したい場合には下記のように書きます。

jQuery(function($) {
	$("#topic-path li").width();
});

しかし、width()は該当する要素の最初にマッチした要素の幅しか取得するができません。なので、一番最初の【ホーム】と書かれている要素しか取得することができません。

そこで、すべての幅を取得するためには以下のことを行います。

  1. 取得した幅サイズを格納するために配列を作る
  2. 幅取得のために繰り返し処理
  3. 取得した幅サイズを配列に加える

取得した幅サイズを格納するために配列を作る

取得した幅サイズを格納する必要があるため、ここでは配列を用意します。

var array = [];

幅取得のために繰り返し処理

繰り返し処理だとだいたい使われるのが、まいどおなじみ(謎)のfor文です。

for(var i = 0; i < $("#topic-path li").length; i++){}

取得した幅サイズを配列に加える

配列に加える場合には、JavaScriptで用意されているpushを使います。

array.push($("#topic-path li").eq(i).width())
これらを合体(謎)さしたのが下記のソースコードになります。
jQuery(function($) {
	var array = [];
	for(var i = 0; i < $("#topic-path li").length; i++){
		array.push($("#topic-path li").eq(i).width());
	}
});

これで要素の幅をすべて取得することができます。すべて取得したものを合計する場合には、下記のように書くと合計を出すこともできます。

	var childElementWidth = 0;
	for(var j = 0; j < array.length; j++){
		childElementWidth += array[j];
	}
	if(childElementWidth > 数値) {
		// なんかの処理
	} else {
		// なんかの処理
	}
これをさっきのと合体(謎)したソースコードが以下のようになります。
jQuery(function($) {
	var array = [];
	for(var i = 0; i < $("#topic-path li").length; i++){
		array.push($("#topic-path li").eq(i).width());
	}

	var childElementWidth = 0;
	for(var j = 0; j < array.length; j++){
		childElementWidth += array[j];
	}
	if(childElementWidth > 数値) {
		// なんかの処理
	} else {
		// なんかの処理
	}
});

このような感じになります。一応、メモとして残しときます。何か参考になれば幸いですが、もっとスマートなやり方があれば教えてください。