jQuery错误地输出重复的XML子节点

Question

我正在使用 jQuery 来解析和输出 XML。我有一个嵌套循环来输出 TASKS 的所有子代，但每次迭代都会立即输出所有子代，而不是每行一个。

<xml version="1.0">
<choices>
    <choice id="1" name="Type 1">
        <description>
            Example a
        </description>
        <tasks>
            <task>Do this</task>
            <task>Do that</task>
        </tasks>
    </choice>
    <choice id="2" name="Type 2">
        <description>
            Example b
        </description>
        <tasks>
            <task>Do other</task>
            <task>Do something</task>
        </tasks>
    </choice>
</choices>

我的脚本：

$(function(){
        "use strict";
//Above XML content is being passed as a string for this example
        var str = "<xml version='1.0'><choices><choice id=\"1\" name=\"Type 1\"><description>Example a</description><tasks><task>Do this</task><task>Do that</task></tasks></choice><choice id=\"2\" name=\"Type 2\"><description>Example b</description><tasks><task>Do other</task><task>Do something</task></tasks></choice></choices></xml>";
        var xmlDoc = $.parseXML(str);
        var $xml = $(xmlDoc);

        var temp = {};

        $xml.find('choice').each(function() {
            var $this = $(this);
            temp.id = $this.attr('id');
            temp.title = $this.attr('name');
            temp.description = $this.find('description').text();
            temp.choices = [];

            var counter = 0;

            $this.find('tasks').eq( counter ).each(function(index, child) {

                document.write( $(child).find("task").text() + counter + "<br>");
                counter++;
            });


        });

    });

我想看到的任务子级的输出：

Do this0
Do that1
Do other2
Do something3

我目前看到的输出：

Do thisDo that0
Do otherDo something0

Answer 1

如果您只需要打印任务，这可以大大简化为：

$xml.find('task').each(function (i) {
    document.write($(this).text() + i + "<br>");
});

JSFiddle

---

如果您需要 choice 循环来执行您刚刚在此问题中遗漏的其他事情，您可以将您的任务循环更改为：

        $this.find('task').each(function() {

            document.write( $(this).text() + counter + "<br>");
            counter++;
        });

并将counter 声明移到choice 循环上方

JSFiddle
（检查jsfiddle中的控制台，在您的实际代码中将console.log改回document.write）

上面将循环遍历当前choice标签内的所有task标签。

如果您只想查看tasks 的子代，而不管标签。你可以这样做：

$this.find('tasks').children().each(function() { ...

如果您想确保只找到 task 的子 tasks，您可以这样做：

$this.find('tasks').children("task").each(function() {

上述所有 3 项都将与您当前的 xml 产生相同的结果（这是您的预期结果）。

---

问题是您在each() 循环中查找“任务”而不是每个单独的“任务”，并从其中的所有task 标记中获取文本。相反，循环遍历每个单独的任务。

进一步分解您的原始代码在做什么......

var counter = 0;
//find the first `tasks` element within `$this`, then loop through it (the single item first task)
$this.find('tasks').eq( counter ).each(function(index, child) {
            //find all the text within all the `task` tags. put 0 and a <br> after
            document.write( $(child).find("task").text() + counter + "<br>");
            //increment counter, doesn't matter since this block of code will only be ran once
            counter++;
        });