web関連

【javascript】複数の要素の高さを取得してそれぞれにcssを指定する方法

2019/07/31

2019/08/01

【javascript】複数の要素の高さを取得してそれぞれにcssを指定する方法

複数の要素の高さを取得してそれぞれにcssでheight指定する方法について調べた時の備忘録

javascripで複数の要素の高さを取得→height指定

htmlコード

<ul>
	<li>これはテスト01</li>
	<li>これはテスト02<br>これはテスト02</li>
	<li>これはテスト03<br>これはテスト03<br>これはテスト03</li>
</ul>

javascripコード

<script>
const lists = document.querySelectorAll('ul > li');
for (let i = 0; i < lists.length; i++) {
    h = lists[i].clientHeight;//高さ取得
    lists[i].style.height = h;//css指定
};
</script>

liの高さを個々に取得してcssで高さを指定できる

querySelectorAll()で取得した要素は配列じゃなくて似たNodeListとかいう配列っぽいやつに格納されちゃうからconst arrayList = [].slice.call(lists);みたいに書くと配列に変換できる

参考

constは変数名を宣言するvarと同じだけど変数への再宣言、再代入が禁止する変数宣言

letは再代入はできるけど再宣言ができない変数宣言

変数宣言「var,let,const」でvarは人為的なバグの要因になる可能性があるから使わない方がいいみたい

 

jQueryで書いた場合

なんか思った以上に手こずった

上手くいった例

<script>
$('ul > li').each(function() {
    h = $(this).height();
    $(this).css('height',h);
});
</script>

繰り返し処理を行ってくれるeach() メソッドを使った方法

いまいちjquery周りよくわかんないけど繰り返し処理で調べているとeach() メソッドばっか出てくるけど他ない?

参考1

参考2

最初javascripのコードをjqueryに置き換えただけの書き方で最初かいてみたけど~.height is not a functionってエラーでて全然うまくいかなかった
戒めに残しておく

エラー出る

<script>
	const lists = $('ul > li');
	for (let i = 0; i < lists.length; i++) {
		h = lists[ i ].height();
	    lists[ i ].css('height',h);//css指定
	};
</script>
 

slickとかのスライダーを使って高さを指定して縦スクロールさせたかった時に一番高さがあるやつに揃ってしまいスクロールが必要ないスライダーなんかも下にスクロールできてしまったので調べた