Javascript AJAX/JQuery—打印新表行上的每个嵌套子级

我一直在为这个看似简单的问题焦头烂额，但我不能对它掉以轻心

我正在尝试使用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>

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

<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>

标题
1规则1
规则2

知道我做错了什么吗

---

提前感谢。

您需要使用循环来迭代每个规则

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

$（this）.find（'light>rule'）。每个（函数（）{
惩罚=惩罚+“”+“”+（规则计数++）+“”+$（此）.text（）+“”+“”；
})

这将选择灯光中的两个规则元素

text（）

返回包装集中所有元素的文本的串联。您需要使用

each（）

$（this）.find（'light>rule'）.each（function（）{
惩罚+=“”+ruleCount++$（this）.text（）+“”；
});

太棒了。我就知道事情会这么简单。我会选择你的帖子，但是c.P.u1更详细一点，尽管你们的答案基本相同。我会投票，但我的声望不够高。谢谢！

<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>

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

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

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