直近の記事一覧
Amazon Kindle のポイント還元とゴルゴのセール (23年7月7日)
conda メモ (23年6月28日)
client_global_hostkeys_prove_confirm: server gave bad signature for RSA key 0: incorrect signature (23年6月27日)
めざせ,YouTuber(2023) (23年6月26日)
下のような HTML(&JavaScript)がある。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="Main">
<div class="item active"></div>
<div class="item active"></div>
<div class="item active"></div>
<div class="item active"></div>
</div>
<script type="text/javascript">
const Elements = document.getElementsByClassName("active")
for(let i = 0; i < Elements.length; i++){
const Element = Elements[i]
Element.classList.remove("active")
}
console.log(Elements);
</script>
</body>
</html>
script の内容は,active クラスをもつ div 要素を取得し,それらから active クラスを削除することです。
最後に Elements 変数を出力します。
しかし,これをブラウザ上で実行すると,コンソールでは次のように表示されます。
HTMLCollection (2)
0
<div class="item active"></div>
1
<div class="item active"></div>
ここで注意したいことは,Elements 変数の中にある div 要素が 2つしかないことと,active クラスをもつ要素が残っていること。
コードの中を修正し,より確認します。
const Elements = document.getElementsByClassName("active")
for(let i = 0; i < Elements.length; i++){
const Element = Elements[i]
Element.classList.remove("active")
Elements.length;
}
実行すると次の値が返ってきます。
3
2
ループ中にて,getElementByClassName で取得した要素数が変化しています。
そのため, i で取得している要素にズレが生じ,classList.remove() が正しく働いていないのでしょう。
forEach も試しましたが同じ結果でした。
そこで,次のように while を使うと結果が変わります。
const Elements = document.getElementsByClassName("active")
let i = 0;
while(Elements.length !== 0){
const Element = Elements[i]
Element.classList.remove("active")
}
console.log(Elements)
console.log の内容は次。
HTMLCollection (0)
プロパティなし
これで,active クラスをもつ要素がすべて削除されたことを確認できます。
しかし,もっとスマートな方法がありそうですが,どうでしょう。
jQuery だったら,まとめてクラス削除できるのですが・・・。
投稿記事のカテゴリやタグと同じ記事をランダム表示します。