1

hiddenclassを持つすべての要素を class に変更したいappeared。これが私のコードです：

e = document.getElementsByClassName("hidden");
for (i = 0; i < e.length; i++) {
    e[i].className = "appeared";
}

hidden という名前のクラスを持つ 3 つの要素のうち 2 つが変更されました。何故ですか？それを解決する方法は？を使用してみgetElementByIdましたが、動作しますが、多くの要素と多くのクラスで使用できるように、一般化する必要があります。

編集

同様の質問があるスレッドがあることがわかりました。私はこれにコードを変更し、それが動作します:

e = document.getElementsByClassName("hidden");
while (e.length) {
    e[0].className = "appeared";
}
4

3 に答える 3

0

元のコードが失敗した理由は、 class を持つ要素のライブ ビューgetElementsByClassNameを返すためです。したがって、ループ内の要素のクラスを変更すると、この変更がビューに反映され、その要素はビューに表示されなくなります。hidden

シナリオの例を次に示します。

  1. e最初は 3 つhiddenの要素が含まれています。
  2. 最初の反復では、i == 0ande[0]はもはや hiddenではなくなります。これは、「古い」要素が削除されたため、 e2 つの要素しか含まれていないことを意味します。hiddene[0]
  3. 2 番目の反復では、iは既にあります1が、まだ要素です。これは、スキップすることを意味します(これはループの前でした)。この反復では、(以前は) のクラスを削除し、ビューは 1 つの要素に縮小されます。e[0]hiddene[0]e[1]e[1]e[2]
  4. i(= 2) が (= 1) を超えたのでe.length、ループは終了します。

最終的な結果は、古い をスキップしたことですe[1]。この問題に対処するには、次の 2 つの方法があります。

  • e最初にその内容を別の配列にコピーして静的にします。これは、jQuery などのほとんどのライブラリが採用するアプローチです。
  • 活力を活かす。編集で示したように、ライブ コレクションを有利に使用できます。ビューの現在の最初の要素を常に操作することで、要素をスキップすることはありません。ループ条件も些細なことです。ビューに要素が含まれなくなるまで繰り返し続ける必要があります。
于 2013-04-13T09:47:43.223 に答える