javascript不会执行嵌套for循环

时间：2012-09-17 03:34:46

标签： javascript html xml for-loop xmlhttprequest

提前感谢您的帮助！

我对javascript很新，但我在java中有相当强的背景，所以我想我会在我正在研究的这个项目上尝试一下。

基本上，我要做的是从xml文件中读取数据并为我正在制作的页面创建html代码。我使用了来自w3schools here的脚本。我已经改变它并从我自己的xml中获取数据，甚至可以执行我需要的更基本的html代码生成。

这是我用于所有测试/构建的页面：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xml test table</title>
<script>
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.open("GET","SWPlanetData.xml",false);
    xmlhttp.send();
    swDoc=xmlhttp.responseXML;
    var s=swDoc.getElementsByTagName("planet");
</script>
</head>
<body>
<div class="planets-info-container"> 
    <script>
            for (i=0;i<s.length;i++)
            {
                var plName
                    = s[i].getElementsByTagName("planetName")[0].childNodes[0].nodeValue;
            var plDesc
                = s[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
            var plUrl
                = s[i].getElementsByTagName("linkUrl")[0].childNodes[0].nodeValue;
            var plUrlTxt
                = s[i].getElementsByTagName("linkText")[0].childNodes[0].nodeValue;
            var plShowsList
                = s[i].getElementsByTagName("show");
            var plGamesList 
                = s[i].getElementsByTagName("videoGame");

            // test section
            var test = ''
            test += '<div><table border = "1">\n' +
                '<tr><td>' + s[i].getElementsByTagName("showText")[0].childNodes[0].nodeValue
                + '</td><td>' + s[i].getElementsByTagName("showUrl")[0].childNodes[0].nodeValue  + '</td></tr>' 
                + '<tr><td>' + s[i].getElementsByTagName("gameText")[0].childNodes[0].nodeValue + '</td><td>'
                +   s[i].getElementsByTagName("gameUrl")[0].childNodes[0].nodeValue + '</td></tr>'
                + '</tr></table></div>'                 
                document.write(test);
                document.close();
            // end section

            document.write("<div class=\"planet-info-container\" id=\""+plName+"-container\">");
                document.write("<div class=\"name-row\"><div class=\"planet-name\">"+plName+"</div></div>");
                document.write("<div class=\"desc-row\">");
                    document.write("<div class=\"planet-desc\">"+plDesc+"</div>");
                document.write("</div>");
                document.write("<div class=\"appearances-row\"><ol class=\"shows\"><li>shows list</li>");
                for(j=0;j<plShows.length;j++){
                    document.write("nested for");
                    var showUrl = s[i].getElementsByTagName("showUrl")[j].childNodes[0].nodeValue;
                    var showText = s[i].getElementByTagName("showText")[j].childNodes[0].nodeValue;
                    document.write("<li><a href=\""+showUrl+"\">"+showText+"</a></li>");
                }
                document.write("</ol><ol class=\"games\"> games list");
                for(j=0;j<s[i].getElementByTagName("videoGame").length;j++){
                    var gameUrl = s[i].getElementsByTagName("gameUrl")[j].childNodes[0].nodeValue;
                    var gameText = s[i].getElementByTagName("gameText")[j].childNodes[0].nodeValue;
                    document.write("<li><a href=\""+gameUrl+"\">"+gameText+"</a></li>");
                }
                document.write("</ol></div>");
                document.write("<div class=\"locs-row\">");
                document.write("</div>");
                document.write("<div class=\"races-row\">");
                document.write("</div>");
                document.write("<div class=\"chars-row\">");
                document.write("</div>");
                document.write("<div class=\"links-row\">");
                    document.write("<div class=\""+plName+"-link\"><a href=\""+plUrl+"\">"+plUrlTxt+"</a></div>");
                document.write("</div>");
                document.write("</div><br />");
            }
        </script> 
</div>
</body>

代码在最后的嵌套for循环处中断，完成document.write并将“显示列表”打印到页面，但之后永远不会到达document.write。

如果有帮助，xml包含星球大战宇宙的行星列表，如下所示：

<planets>
<planet>
    <planetName>planet</planetName>
    <description>some text</description>
    <appearances>
        <show>
            <showUrl>url</showUrl>
            <showText>hyperlink text</showText>
        </show>
        <videoGame>
            <gameUrl>url</gameUrl>
            <gameText>hyperlink text</gameText>
        </videoGame>
    </appearances>
    <locationsOfInterest>
        <location>location name</location>
    </locationsOfInterest>
    <famousCharactersRelatedTo>
        <character>a character</character>
    </famousCharactersRelatedTo>
    <externalLinks>
        <link>
            <linkUrl>url</linkUrl>
            <linkText>hyperlink text</linkText>
        </link>
    </externalLinks>
</planet>

编辑：我通过尝试削减代码来减少混乱，这使得它变得更难，但是我遗漏了一些重要的东西/错误地放入了我所放入的代码，所以我用之前的代码替换了整个代码页面原样。

再次编辑：我已经取得了一些进展，但我仍然遇到嵌套循环的问题。它将进入第一个，但在第一次迭代设置第二个var之前一直中断：

var showText = s[i].getElementsByTagName("showText")[j].childNodes[0].nodeValue;

谁能明白为什么会破坏？

3 个答案:

答案 0 :(得分：2)

在您的代码中：

> var s = swDoc.getElementsByTagName("planet");

希望 swDoc 是对XML文档的引用。

> var plShowsArr = s[i].getElementsByTagName("show");

您尚未显示声明或初始化i的位置，因此我预计会出现错误。此外，名称plShowsArr推断您认为它是一个数组，而不是，getElementsByTagName返回NodeList，这类似于数组，因为它具有自我调整的长度属性和成员可以通过索引访问。但这就是相似性结束的地方。 

> document.write("<div><table border = \"1\">");

您可以嵌套单引号和双引号以避免引用，例如

  document.write('<div><table border="1">');

但是使用document.write这种方式并不是最佳的。如果文档已完成加载，则在编写新内容之前，对document.write的调用将首先清除整个文档。在任何情况下，创建单个标记字符串的效率要高得多，然后使用document.write（如果合适）或将标记设置为某个容器元素的innerHTML。

所以你可以这样做：

var markup = ''
...
  markup += '<div><table border="1">';

...
// If writing to a child window
document.write(markup);
document.close();

// If assigning to the innerHTML of a container element
var container = document.getElementById('containerID');
if (container) {
  container.innerHTML = markup;
}

稍后你有：

> document.write('<div class="appearances-row"><ol class="shows">shows list');

这会将文本节点作为OL元素的子元素插入。这是不允许的，接下来发生的任何事情都依赖于实现，你的猜测和我的一样好。您已将用户代理置于不确定状态。

然后：

>  for(j=0;j<plShows.length;j++){

另一个未声明的变量： j 在执行此行时成为全局变量。

我还没有分析计数器在做什么，我会把它留给你。

修改

使用调试器（Firefox中的Firebug可以）显示以下内容：

  1. XML缺少关闭的行星标记

  2. 在完成对文档的所有写入之前，请不要使用document.close，在加载文档时使用document.write时没有必要，并且在脚本之后加载更多内容。

  3. 在for (j=0; j<plshows.length; j++){行中，未定义变量plshows，请替换为plShowsList

  4. 在document.write("</ol><ol class=\"games\"> games list");行中，应在OL之后和文本之前插入LI。

  5. 在var showText = s[i].getElementByTagName...行中，引用s[i]没有方法getElementByTagName，方法为getElementsByTagName（此错误有两行 - 复制粘贴？）

    6. 为您的代码添加一些空白区域，这是非常难以理解的。并将所有document.writes更改为连接字符串并插入一次作为div的innerHTML（将脚本移动到div之后）。

    修复以上所有内容并“正常”。您的发票在邮件中......

答案 1 :(得分：1)

至少我认为你需要做两处修改。

移动以下两行：

var plShowsArr = s[i].getElementsByTagName("show");
var plGamesArr = s[i].getElementsByTagName("videoGame");

... 内部外部for循环。这两行都试图通过i变量索引当前“planet”元素的子元素。

更新内部for语句，该语句目前正在使用plShows.length，但应使用plShowsArr.length。

可选择通过从当前“show”中选择“showUrl”和“showText”来改进内循环，而不是从当前“planet”中选择它们：

       for(j=0;j<plShowsArr.length;j++){
            document.write("nested for");
            var showUrl = plShowsArr[j].getElementsByTagName("showUrl")[0].childNodes[0].nodeValue;
            var showText = plShowsArr[j].getElementByTagName("showText")[0].childNodes[0].nodeValue;
            document.write("<li><a href=\""+showUrl+"\">"+showText+"</a></li>");
        }

可以进行其他一些改进，但它们（可能？）与您当前的问题没有直接关系。

答案 2 :(得分：0)

如果你想知道，这对我来说是愚蠢的。

之间的巨大差异 
var showUrl = plShowsArr[j].getElementsByTagName("showUrl")[0].childNodes[0].nodeValue;

和

var showText = plShowsArr[j].getElementByTagName("showText")[0].childNodes[0].nodeValue;

就在这里：

how to be code like a n00b....

相关问题
最新问题