はじめに

前回、JavaScriptでClassを取得したい時の設定あれこれの中で「特定の親Classの中の特定の子ClassをJavascriptで記述する場合、for文の二重ループになるので少し複雑になる」というような説明をしました。

では実際に二重ループをどのように記述するのか説明したいと思います。

目次

「getElementsByClassName」のおさらい

これも前回説明していますが、JavaScriptでClassを取得する場合、getElementsByClassNameメソッドを使用します。

その際、下記のようにgetElementsByClassName('クラス名')[0]と記述する必要があります。

HTML

<p class="js-text_test11">このテキストは赤くなります</p>
<p class="js-text_test11">このテキストは赤くならない</p>

JavaScript

document.getElementsByClassName('js-text_test11')[0].style.color = "red";

できあがったもの

この場合、同じクラスの1番目（[0]から数えるので0が一番目）にしかにスタイルが適用されません。

同じClass全てにスタイルを適用させるにはループ処理が必要になります。

ループ処理による「getElementsByClassName」の記述方法

こちらも前回紹介していますが、getElementsByClassNameでループ処理をする場合、for文を使います。

for文によるJavaScriptの記述は以下のようになります。

HTML

<p class="js-text_test21">このテキストは赤くなります</p>
<p class="js-text_test21">このテキストも赤くなります</p>

JavaScript

const example21 = document.getElementsByClassName('js-text_test21');
for( i=0; i<example21.length; i++) {
	example21[i].style.color = "red";
}

できあがったもの

「getElementsByClassName」で入れ子のClassを取得する方法

それでは次に、「特定の親Class内の特定の子Classのみ取得する方法」つまり入れ子の記述を紹介します。

まずはfor文無しで紹介しますので、構造としてどのようになっているかご確認ください。

HTML

<p class="js-child32">このテキストは赤くならない</p>
<p class="js-child31">このテキストも赤くならない</p>
<div class="js-parent31">
	<p class="js-child31">（子クラス）このテキストは赤くなります</p>
	<p class="js-child31">（子クラス）このテキストは赤くならない</p>
</div>
<div class="js-parent31">
	<p class="js-child31">（子クラス）このテキストは赤くならない</p>
	<p class="js-child31">（子クラス）このテキストは赤くならない</p>
</div>

JavaScript

document.getElementsByClassName('js-parent31')[0].getElementsByClassName('js-child31')[0].style.color = "red";

できあがったもの

親クラスjs-parent32内の子クラスjs-child32のみテキストが赤くなりますが、最初の例と同様に親子それぞれ1番目の要素にしかスタイルが適用されません。

二重ループによる入れ子のClass取得方法

という訳でここからが本題です。

入れ子構造の親クラス・子クラス全ての要素にJavaScriptを適用させるには、親・子それぞれをループ処理（二重ループ）が必要になります。

構造としては、まず親クラスをループさせて、その中で子クラスをループ処理させる、というような記述になります。

HTML

<p class="js-child32">このテキストは赤くならない</p>
<p class="js-child31">このテキストも赤くならない</p>
<div class="js-parent31">
	<p class="js-child31">（子クラス）このテキストは赤くなります</p>
	<p class="js-child31">（子クラス）このテキストは赤くならない</p>
</div>
<div class="js-parent31">
	<p class="js-child31">（子クラス）このテキストは赤くならない</p>
	<p class="js-child31">（子クラス）このテキストは赤くならない</p>
</div>

JavaScript

const parent = document.getElementsByClassName('js-parent41');
for( x=0; x<parent.length; x++ ){
	const child = parent[x].getElementsByClassName('js-child41');
	for( y=0; y<child.length; y++ ) {
		child[y].style.color ="red";
	}
}

できあがったもの