Question

代码的目的是使用对象中的信息构建一系列嵌套HTML：

以下是我创建的信息对象：

function branch(level,sciname,comname,parent,children){
    this.level = level;
    this.sciname = sciname;
    this.comname = comname;
    this.parent = parent;
    this.children = children;}

var animalia = new branch(1,'Animalia','Animals',"",['chordata']);
var chordata = new branch(2,'Chordata','Chordates',animalia,['petromyzontida','actinopterygii']);
var actinopterygii = new branch(3,'Actinopterygii','Ray-finned Fishes',chordata,['siluriformes','scorpaeniformes','salmoniformes','percopsiformes','perciformes','osteoglossiformes','osmeriformes','lepisosteiformes','gasterosteiformes','gadiformes','esociformes','cyprinodontiformes','cypriniformes','clupeiformes','atheriniformes','anguilliformes','amiiformes','acipenseriformes']);
var petromyzontida = new branch(3,'Petromyzontida','Lampreys',chordata,['petromyzontiformes']);

以下是剧本：

    function CreateDiv(parent,child,z,width,height,top,left,bgcolor){
        var parent_ = document.getElementById(parent);
        var newdiv = document.createElement("div"); 
        newdiv.setAttribute("id",child);
        newdiv.style.zIndex = z;
        newdiv.style.position = "absolute";
        newdiv.style.width = width + "%";
        newdiv.style.height = height + "%";
        newdiv.style.top = top + "%";
        newdiv.style.left = left + "%";
        newdiv.style.backgroundColor = bgcolor;
        parent_.appendChild(newdiv);}

function CreateTree(){
    var firstdiv = document.createElement("div");
    firstdiv.setAttribute("id","animalia");
    document.getElementById("container1").appendChild(firstdiv);
    var parent1 = "animalia";
    var children1 = window[parent1].children;
    var numbchildren1 = children1.length;
    var rowcounter1 = 1;
    var columncounter1 = 0;
    for (i=0;i<numbchildren1;i++){
        var child1 = children1[i];
        var z1 = 2;
        var columns1 = Math.ceil(Math.sqrt(numbchildren1));
        var width1 = (100/columns1) - 2;
        var rows1 = Math.ceil(numbchildren1/columns1);
        var height1 = (100/rows1) - 2;
        var top1 = rowcounter1*height1 - height1 + 1;
        var left1 = columncounter1*width1 + 1;                          
        var bgcolor1 = "#B43333";   
        CreateDiv(parent1,child1,z1,width1,height1,top1,left1,bgcolor1);
        var numbchildren2 = window[child1].length;
        if ((i/rowcounter1) == columns1){
            rowcounter1 = rowcounter1 + 1;}
            else {rowcounter1 = rowcounter1;}
        if (columncounter1 == columns1){
            columncounter1 = 1;}
            else {columncounter1 = columncounter1 + 1;}
        var rowcounter2 = 1;
        var columncounter2 = 0;
        console.log("before:" + columncounter2);
        for (j=0;j<numbchildren2;j++){          
            console.log("after:" + columncounter2);
            var child2 = children2[j];
            var z2 = 3;
            var columns2 = Math.ceil(Math.sqrt(numbchildren2));
            var width2 = (100/columns2) - 1;
            var rows2 = Math.ceil(numbchildren2/columns2);
            var height2 = (100/rows2) - 1;
            var top2 = rowcounter2*height2 - height2 + 1;
            var left2 = columncounter2*width2 - width2 + 1;                         
            var bgcolor2 = "#B48233";   
            CreateDiv(parent2,child2,z2,width2,height2,top2,left2,bgcolor2);}}}

我通过调试器运行了几十次代码，没有错误。然而，脚本没有完全执行。我怀疑是一个无限循环，但我不明白为什么会发生这种情况，并且在仔细检查代码后，我发现没有真正的问题。我可以告诉代码似乎在哪里打破。上面的代码中有两个console.log（）语句。第一个控制台语句被正确记录，但第二个没有。调试器没有显示错误（Firebug），但代码仍然无法完全执行。请帮忙！我仍然非常欢迎建议或批评，因为我还在学习一些基础知识。

作为一个注释：最后，我将添加到这个过程来创建几层嵌套元素，但是我想在我开始进一步嵌套之前只获得第一对几层，因为我做了额外的嵌套应该相对容易。

Answer 1

比较

var children1 = window[parent1].children;

到

var numbchildren2 = window[child1].length;

我认为第二个在长度之前缺少一个“.children”。正如Shaed指出的那样，numbchildren2被错误地初始化是for循环未运行的最可能原因，所以你应该一直在研究它。

Answer 2

我不熟悉你的窗口[elementID]的语法来获取一个元素，但我很确定它不起作用。请尝试使用document.getElementById。

http://jsfiddle.net/M9jtt/

嵌套循环中的意外中断不会显示在调试器中

2 个答案: