0

HtmlCollection にアクセスして反復する方法についての回答があることは知っていますが、ここではうまくいきません。
クラス「tabSheetActive」を持つ要素をいくつか取得しました。これらの量は 1 つ以上になる可能性があります。
私はそれらにアクセスします：

var activeTabSheets = document.getElementsByClassName('tabSheetActive');
console.log('Active sheets amount: ' + activeTabSheets.length); // outputs 2

コレクションをログに記録すると、次のように出力されます。

[div.tabSheetActive.sheet_512_0, div.tabSheetActive.sheet_512_0]

その後、私はそれらを反復して、次のようにクラスを操作しようとします:

for (var i = 0; i < activeTabSheets.length; i++) { // just iterates one time
    var activeTabSheet = activeTabSheets[i];
    console.log("Index: " + i); // outputs 0 
    console.log(activeTabSheet); // outputs first element
    var newClassName = activeTabSheet.className.replace('tabSheetActive', 'tabSheet');
    activeTabSheet.className = newClassName;
}

のトリックは私にとってもうまくいき[].forEach.call(activeTabSheets, function(activeTabSheet) { //code here });ません。1回だけ繰り返します。
それは本当にばかげているに違いありませんが、私はこれについて何時間もデバッグして髪を引き裂いています。

4

1 に答える 1

2

getElementsByClassNameライブHTMLCollectionを返します。

この行：

activeTabSheet.className.replace('tabSheetActive', 'tabSheet');

リストの最初の項目がクラスのメンバーにならないようにします。その結果、それは削除され、他のすべてがシャッフルされます (したがって、インデックス 1 にあった要素はインデックス 0 に移動します)。

これに対処するには、次のことができます。

  • querySelectorAll非ライブ NodeList を返す使用
  • HTMLCollection を逆方向にループします。
  • whileループを使用し、HTMLCollectionの長さ0をテストし、常に index を変更します。
  • ループする前にすべての値を配列にコピーします
于 2015-05-28T12:08:12.520 に答える