jQuery的each()方法不能循环新添加的表格行

Question

我有一个非常简单的表格

<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>

当我向上述表格中添加一个包含文本5的新行时，使用jQuery each()方法不会循环新添加的行，而只返回预定义的元素而非动态添加的元素。

$("table > tbody").append("<td>5</td>");
$("table tr td").each(function(){
  alert($(this).text());
});

请查看这里的JS FIDDLE链接，该链接与IT技术有关。

- Murali N

---

你的选择器是 tr td，而你直接将新的 <td> 放在了 <tbody> 中。 - Derek 朕會功夫

Answer 1

在 tbody 中，您不能直接添加 td，而是需要将它们包裹在 tr 中。 演示实例

$("table > tbody").append("<tr><td>5</td></tr>");
$("table tr td").each(function(){
  alert($(this).text());
});

- Adil

---

Chrome可以做到这一点，即使HTML无效。请参见OP的fiddle。 - John Dvorak

@Reigel，昆瓦里怎么了？ ;) - alex

@JanDvorak，是的，Chrome可以让你这样做...但OP的选择器不行...想象一下table tr td... - Reigel Gallarde

@alex 哈哈...我快速编辑了它...但你的眼睛真快... :D - Reigel Gallarde

Answer 2

你的推理是错误的。它无法找到元素的原因是你的选择器与你添加的元素嵌套不匹配。

将 td 元素包装在一个 tr 元素中。

- alex

Answer 3

您需要做以下事情：

$("table > tbody").append("<tr><td>5</td></tr>");
$("table tr td").each(function(){
  alert($(this).text());
});

原因很简单，你的原始代码将产生新行，如<tbody><td>5</td></tbody>，但在each函数中没有包含你要查找的tr标签。

- Lim