0

document.getElementsByClassNameで特定のclassを取得して、forEachでループさせる際に、2つあるはずの要素が1つしかカウントされません。

consoleで確認すると、下記値が返ってきます。
MODAL.methods.show() = length: 2
MODAL.methods.overlay() = length: 2
MODAL.methods.close() = length: 1

querySelectorAllで対応すると解決するのですが、getElementsByClassNameだとうまくいかない理由が分かりません…

原因がわかる方いらっしゃいましたら教えていただきたいです<(_ _)>

MODAL.methods = {
    show: function(elm){
        var $self = elm;
        var $next = $self.nextElementSibling;
        if($next.classList.contains(MODAL.tar) && !$self.classList.contains(MODAL.active)) {
            $self.classList.add(MODAL.active);
            $next.classList.add(MODAL.active);

            $next.style.display = 'block';

            console.log(document.getElementsByClassName(MODAL.active));

            MODAL.methods.overlay();
        }
    },
    close: function(){
        var $close = document.getElementById(MODAL.close);
        console.log(document.getElementsByClassName(MODAL.active));
        Array.prototype.forEach.call(document.getElementsByClassName(MODAL.active), function(elm){
            elm.classList.remove(MODAL.active);
            if(elm.classList.contains(MODAL.tar)){
                elm.style.display = 'none';
            }
        });
        $close.remove();
    },
    overlay: function(){
        console.log(document.getElementsByClassName(MODAL.active));
        document.body.insertAdjacentHTML('beforeend', '<div id="' + MODAL.close + '" class="modal-overlay" onClick="MODAL.methods.close();"><span class="modal-overlay_child">close</span></div>');
    }
};
3
  • マルチポスト qiita.com/o-sushi/items/7510774980f5ae2ef7ea
    – htb
    2018年7月31日 5:52
  • @osushi さん、スタック・オーバーフローへようこそ! Qiita の方で解決しているようですが、スタック・オーバーフローでは自己解決した質問に自己回答ができ、また、推奨されています。同じ問題で困った方が解決法に至れるよう、よろしければ、お願いいたします :)
    – nekketsuuu
    2018年7月31日 6:37
  • @nekketsuuu さん。ご指摘ありがとうございます!自己回答しておきました!
    – osushi
    2018年7月31日 11:18

1 件の回答 1

1

「HTMLCollection」が動的にclassを参照していることが原因でした。
getElementsByClassNameだとHTMLCollectionを返してしまうので、
静的なNodeListを返してくれる「querySelectorAll」に変更することで解決しました!

Qitaにメモ残しています。
https://qiita.com/o-sushi/items/929f9bbf46d4f61819ac

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。