时间戳

首页 > 解决方案 > for循环不执行js中的所有循环

javascript - for循环不执行js中的所有循环

问题描述

我有这个代码，

var v = 'asdasdadsa<img src="ttttttt">asdasdadsa';
var x = $('<div></div>').append(v);
var t = $('<div></div>').get(0);
var z = x.get(0).childNodes;
var max = 20;
var length = 0;
for(i=0;i<z.length;i++){
    console.log(z[i].nodeType);
    // if(z[i].nodeType == 3){
    //     var prev_length = length;
    //     length += z[i].length; 
    //     if(length > max){
    //         var val = z[i].nodeValue;
    //         t.appendChild(document.createTextNode(val.substring(0,max-prev_length)));
    //         break;
    //     }else{
    //         t.appendChild(z[i]);
    //     }
    // }
    if(z[i].nodeType == 1){
        if(length > max){
            // break;
        }else{
            t.appendChild(z[i]);
        }
    }
}
console.log(t);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

上面的 for 循环没有执行所有三个循环，在执行第二个 if 条件时中断。

如果您注释第二个 if 条件，它将执行所有三个循环。

所以问题必须在第二个if条件下。

标签： javascriptloops

解决方案

将元素附加到tfrom的行为z是改变 的长度z。这可以用一些console.log. z您可以通过缓存循环之前的长度来解决此问题（尽管可能会破坏其他内容） 。

var v = 'asdasdadsa<img src="ttttttt">asdasdadsa';
var x = $('<div></div>').append(v);
var t = $('<div></div>').get(0);
var z = x.get(0).childNodes;
var max = 20;
var length = 0;
console.log("len before",z.length);
for(i=0;i<z.length;i++){
    //console.log(i,z[i].nodeType);
    // if(z[i].nodeType == 3){
    //     var prev_length = length;
    //     length += z[i].length; 
    //     if(length > max){
    //         var val = z[i].nodeValue;
    //         t.appendChild(document.createTextNode(val.substring(0,max-prev_length)));
    //         break;
    //     }else{
    //         t.appendChild(z[i]);
    //     }
    // }
    if(z[i].nodeType == 1){
        if(length > max){
            // break;
        }else{
           t.appendChild(z[i]);
        }
    }
    console.log("len after",z.length);
}
console.log(t);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读