javascript - クラス内のすべてのオブジェクトのzIndexを定義する

Question

ダイアログクラスのいくつかの要素のz-indexを1に設定したいと思います。

現在、私は以下のコードを使用しています：

document.getElementsByClassName("dialog")[0].style.zIndex = "1";

しかし、確かに最初の要素に対してのみ機能します。クラスに固定数のオブジェクトがないため、配列の定義も機能しません。この問題を解決する別の方法はありますか？

Answer 1

ループを使用します。

var els = document.getElementsByClassName("dialog");

for (var i = 0, l = els.length; i < l; i++) {
   els[i].style.zIndex = 1;
}

そして、これはループの代替案に関する楽しい作品です: http://htmlcssjavascript.com/javascript/another-front-end-engineer-interviewing-question-loop-alternatives/

更新: コメントで指摘されているように、記述されたコードは最初の要素 (インデックス [0]) にのみ影響します。このメソッドは、選択されたすべての要素を含むNodeListgetElementsByClassNameを返します。リストを繰り返し処理して各要素を個別に更新する必要があるため、ループが発生します。

Answer 2

を使用[0]すると、最初の要素のみを選択することになります。

これらの要素をループする別の方法を紹介したいと思います。

var a = document.getElementsByClassName( 'dialog' ),
    forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach)

forEach( a, function( el ) {
    el.style.zIndex = 1
} )

Answer 3

次のように、 getElementsByClassName() によって返される配列の要素を反復処理する必要があるでしょう。

var a = document.getElementsByClassName("dialog");
for (var x = 0; x < a.length; x++) {
  a[x].style.zIndex = 1;
}