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

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は再代入はできるけど再宣言ができない変数宣言

jQueryで書いた場合

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

上手くいった例

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

繰り返し処理を行ってくれる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>