for循環(huán)遍歷出錯(cuò)

<body>
    <div id="J_APP_Wrapper">
        <div class="" recharge="true">1</div>
        <div class="" recharge="true">2</div>
        <div class="" recharge="true">3</div>
        <div class="live-wrapper">4</div>
    </div>
    <script type="text/javascript">
    window.onload = function() {
        remove()
    }
    // 刪除節(jié)點(diǎn)
    function remove() {
        var removeNode = document.getElementById("J_APP_Wrapper");
        var removeNodeL = removeNode.children;
        console.log(removeNodeL)
        for (var i = 0; i < removeNodeL.length; i++) {
            if (removeNodeL[i].className != "live-wrapper") {
                removeNode.removeChild(removeNodeL[i])
            }
            // if (removeNodeL[i].getAttribute("recharge") == "true") {
            //     removeNode.removeChild(removeNodeL[i])
            // };

        };
    }
    </script>
</body>

問題是按照我的邏輯我是刪除className != "J_APP_Wrapper" 的節(jié)點(diǎn)
但是結(jié)果是出現(xiàn)2和4 ，
希望尋求幫忙告知原因
如圖圖片描述

回答

編輯回答

墨小羽

window.onload = function() {
    remove("J_APP_Wrapper")
}
// 刪除節(jié)點(diǎn)
function remove(el) {
    var removeNode = document.getElementById(el);
    var removeNodeL = removeNode.children;
    console.log(removeNodeL)
    for (var i = 0; i < removeNodeL.length; i++) {
        if (removeNodeL[i].className != "live-wrapper") {
            removeNode.removeChild(removeNodeL[i]);
            i--;
        }


    };
}
</script>

2017年4月12日 05:26

編輯回答

枕頭人

removeNode.children是個(gè)動(dòng)態(tài)的集合。
[1,2,3]
刪掉1后,2和3會(huì)向前挪一位，而循環(huán)的索引不會(huì)。
所以可以從后向前循環(huán)。

參考

ParentNode.children 是一個(gè)只讀屬性，返回一個(gè)Node的子elements ，是一個(gè)動(dòng)態(tài)更新的 HTMLCollection

會(huì)隨著實(shí)際情況跟隨更新的

2018年4月28日 05:20

編輯回答

維她命

這里你要明白removeNodeL是儲(chǔ)存了你的node節(jié)點(diǎn)元素的。既然明白這個(gè) 那么我們就能分析了

for (let i = 0; i < removeNodeL.length; i++) {

    if (removeNodeL[i].className != "live-wrapper") {
        console.log(i)
        removeNode.removeChild(removeNodeL[i]);
    }
};

當(dāng)輸出i時(shí)會(huì)發(fā)現(xiàn)

按道理來說應(yīng)該會(huì)輸出三次，可這里為什么只有兩次呢，原因是開頭說了removeNodeL是儲(chǔ)存了節(jié)點(diǎn)，當(dāng)你每次刪除了節(jié)點(diǎn)后，removeNodeL數(shù)組里面的值也會(huì)減少

當(dāng)i=0的時(shí)候 removeNodeL的值為<div>2</div><div>3</div><div>4</div>
當(dāng)i=1的時(shí)候 (注意，此時(shí)removeNodeL[1]是<div>3</div>!)removeNodeL的值為<div>2</div><div>4</div>

這樣問題就出來咯~ 主要還是會(huì)分析，希望采納

2017年1月16日 21:15

編輯回答

夏木

<body>
    <div id="J_APP_Wrapper">
        <div class="" recharge="true">1</div>
        <div class="" recharge="true">2</div>
        <div class="" recharge="true">3</div>
        <div class="live-wrapper">4</div>
    </div>
    <script type="text/javascript">
    window.onload = function() {
        remove()
    }
    // 刪除節(jié)點(diǎn)
    function remove() {
        var removeNode = document.getElementById("J_APP_Wrapper");
        var removeNodeL = removeNode.children;
        var len = removeNodeL.length;
        console.log(removeNodeL)
        for (var i = len-1; i >= 0; i--) {
            if (removeNodeL[i].className != "live-wrapper") {
                removeNode.removeChild(removeNodeL[i])
            }
            // if (removeNodeL[i].getAttribute("recharge") == "true") {
            //     removeNode.removeChild(removeNodeL[i])
            // };

        };
    }
    </script>
</body>

removeNodeL的大小是縮小的

2017年1月2日 17:35