15

要素のクラスを変更してプロパティを変更する関数を作成しました。何らかの理由で、一部の要素のみが変更されました。解決策を見つけるのに数時間かかりましたが、それは私には奇妙に思えます。おそらくあなたは私にこれを説明することができます。

これは機能していません：

function replace(){
  var elements = document.getElementsByClassName('classOne');

  for (var i = 0; i < elements.length; i++) {
    elements[i].className = 'classTwo';               
  }
}

JSFiddleを参照してください。1つおきのアイテムのみが影響を受けます。1つおきの赤い要素だけが色を青に変えます。

forそこで、ループの最終式を変更して、iもうインクリメントしないようにしました。

function replace(){
  var elements = document.getElementsByClassName('classOne');

  for (var i = 0; i < elements.length; i) { // Here’s the difference
    elements[i].className = 'classTwo';               
  }
}

これはうまくいきます！呼び出されたようpushで、増分は必要ありません。これは正常ですか？私が見た例とは異なります。

4

3 に答える 3

22

起こっているのは奇妙な副作用です。classNameの各要素を再割り当てするとelements、その要素が配列から削除されます! (実際には、@ user2428118 が指摘しているように、配列でelementsはなく、配列のようなオブジェクトです。違いについては、このスレッドを参照してください。)これは、classOneクラス名がなくなったためです。ループが終了すると (2 番目のケース)、elements配列は空になります。

ループを次のように記述できます。

while (elements.length) {
    elements[0].className = 'classTwo'; // removes elements[0] from elements!
}

最初のケースでは、 をインクリメントiすることで、 class を持つ (元の) 要素の半分をスキップしていますclassOne。

ところで、素晴らしい質問です。よく研究され、明確です。

于 2013-03-22T04:03:38.623 に答える
4

getElementsByClassNameNodeListを返します。NodeListコレクションはライブコレクションです。つまり、ドキュメントの変更がコレクションに影響します。もっと

于 2013-03-22T06:21:25.580 に答える
-3

または、ループを元に戻し、長さ 1 から始めて 0 まで下げます。

于 2014-12-01T14:53:57.937 に答える