[解決済み] getElementsByClassName を正しく反復処理する方法
質問
私はJavascriptの初心者です。
私は、ウェブページを
window.onload
の場合、クラス名で要素の束を見つけなければならない (
slide
を、あるロジックに基づいて異なるノードに再分配します。私は、関数
Distribute(element)
これは、要素を入力として受け取り、分配を行うものです。私は次のようなことをしたい(例えば、概要のように
こちら
または
こちら
):
var slides = getElementsByClassName("slide");
for(var i = 0; i < slides.length; i++)
{
Distribute(slides[i]);
}
しかし、これは私のために魔法をかけません、なぜなら
getElementsByClassName
は実際には配列を返さず
NodeList
ということである。
...これは私の推測ですが...
関数内部で変更される
Distribute
(この関数の内部でDOMツリーが変更され、特定のノードのクローンが発生します)。
For-each
ループ構造も役に立ちません。
変数slidesの挙動は実に非決定的で、反復するたびに要素の長さや順番が乱暴に変化する。
私の場合、NodeListを反復処理する正しい方法は何でしょうか?一時的な配列に入れることを考えていましたが、その方法がよくわかりません...。
EDITです。
重要なことを言い忘れましたが、1つのスライドが別のスライドの中にある可能性があります。
slides
変数があることを知りました。
アロチ
.
私の解決策は、まず各要素を配列にクローン化し、その配列を1つ1つ
Distribute()
を後から追加しました。
解決方法は?
MDNによると
からアイテムを取得する方法です。
NodeList
は
nodeItem = nodeList.item(index)
このように
var slides = document.getElementsByClassName("slide");
for (var i = 0; i < slides.length; i++) {
Distribute(slides.item(i));
}
私自身は試していないのですが(通常の
for
ループはいつもうまくいっています)、試してみてください。
関連
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
親子コンポーネント通信を解決する3つのVueスロット
-
Vueの「データを聴く」原則を解説
-
[解決済み】SyntaxError: JSONの位置1に予期しないトークンoがある。
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
要素ツリー制御によるvueTreeテーブル
-
Vueの要素ツリーコントロールに破線を追加する説明
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
Vueにシンプルなメモ帳機能を実装
-
Vueのフォームイベントのデータバインディングの説明
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み] JS: Array.forEachを使用してgetElementsByClassNameの結果を反復処理する。
-
nullのプロパティinnerHTMLを読み取れません エラーメッセージ
-
JavaScriptのgetElementById()メソッド入門