javascript - AJAX/JQuery - 在新表行上打印每个嵌套子项

Question

我一直在为这个看似简单的问题绞尽脑汁，但我无法解决它。

我正在尝试使用 AJAX 和一些 JQuery 生成 HTML 表格。 XML 保存我想要呈现的数据，每个子节点都在新行上呈现。 AJAX 完成所有繁重的工作并生成表格。

XML 代码:

    <?xml version="1.0" encoding="utf-8"?>

<shows>
  <show>
    <title>Title</title>
    <light>
      <rule>Rule 1</rule>
      <rule>Rule 2</rule>
    </light>
    <medium>
      <rule>Rule 3</rule>
      <rule>Rule 4</rule>
    </medium>
    <hard>
      <rule>Rule 5</rule>
      <rule>Rule 6</rule>
    </hard>
    <extreme>
      <rule>Rule 7</rule>
    </extreme>
  </show>
</shows>

显然，我会得到的不仅仅是这一点数据，但这不是重点。

相关 HTML

<table id="rules"></table>

和 JavaScript:

$(xml).find('shows > show').each(function () {                                                  
                var title = $(this).find('title').text();                                                       
                title = "<tr>" + "<th>" + "</th>" + "<th>" + "<h1>" + title + "</h1>" + "</th>" + "</tr>";

                category = "<tr>" + "<th>" + "</th>" + "<th>" + "Category Title: " + "</th>" + "</tr>";
                rule = $(this).find('light > rule').text(); //problem is here?
                punish = punish + "<tr>" + "<td>" + ruleCount + "</td>" + "<td>" + rule + "</td>" + "</tr>";

Javascript 的内容远不止于此，但我相信上面的注释行是我头痛的罪魁祸首。它还在脚本中复制粘贴了 3 次，并进行修改以生成中等、困难和极限的规则。

问题是这样的:

标题、类别标签(表格标题)、行、单元格都生成得很好，但需要渲染数据，以便在新行(或本质上是新表格行)上创建每个节点(规则)。相反，rule = $(this).find('light >rule').text(); 行将规则 1 和规则 2 塞在一起，规则 3 和规则 4 塞在一起，等等(当在显然是脚本)。生成的 HTML 有点像这样:

<table id="rules">
     <tr><th></th><th><h1>Title</h1></th></tr>
     <tr><td>1</td><td>Rule1Rule2</td></tr>
</table>

我真正想要的是每个规则都位于它自己的表行上。像这样:

<table id="rules">
    <tr><th></th><th><h1>Title</h1></th></tr>
    <tr><td>1</td><td>Rule1</td></tr>
    <tr><td>2</td><td>Rule2</td></tr>
</table>

知道我做错了什么吗？

提前致谢。

Answer 1

rule = $(this).find('light > rule').text();

这将选择灯光中的两个规则元素。 text() 返回包装集中所有元素的文本的串联。您需要使用 each()

迭代每个规则

$(this).find('light > rule').each(function() {
    punish += "<tr><td>" + ruleCount + "</td><td>" + $(this).text() + "</td></tr>";
});