问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

for循环遍历出错

头像
王老san
    55022031
    头像
    toBeTheLight
      16.6k41634
      <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()
    }
    // 删除节点
    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" 的节点
      但是 结果是出现2和4 ，
      希望寻求帮忙 告知原因
      如图图片描述

      javascript
      阅读 2.8k
      4 个回答
      得票最新
      头像
      七凉
        1.2k22646
        ✓ 已被采纳

        这里 你要明白removeNodeL是储存了你的node节点元素的。既然明白这个 那么我们就能分析了

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

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

        当输出i时会发现

        clipboard.png

        按道理来说 应该会输出三次，可这里为什么只有两次呢，原因是开头说了removeNodeL是储存了节点，当你每次删除了节点后，removeNodeL数组里面的值也会减少

        当i=0的时候 removeNodeL的值为<div>2</div><div>3</div><div>4</div>
        当i=1的时候 (注意，此时removeNodeL[1]是<div>3</div>!)removeNodeL的值为<div>2</div><div>4</div>

        这样问题就出来咯~ 主要还是会分析，希望采纳

        头像
        toBeTheLight
          16.6k41634

          removeNode.children是个动态的集合。
          [1,2,3]
          删掉1后,2和3会向前挪一位，而循环的索引不会。
          所以可以从后向前循环。

          参考

          ParentNode.children 是一个只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection

          会随着实际情况跟随更新的

          头像
          treeandgrass
            1.3k32543
            <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()
    }
    // 删除节点
    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的大小是缩小的

            头像
            王老san
              55022031

              <script type="text/javascript">

              window.onload = function() {
    remove("J_APP_Wrapper")
}
// 删除节点
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>
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题