使用jQuery选择tbody但不包括嵌套表格中的tbody。

Question

我正在尝试使用 jQuery 选择一个表格并追加数据。问题是，这个表格可能包含嵌套的子表格。结果是当我追加数据时，不仅父表格的 tbody 被追加了，所有子表格的 tbody 也被追加了。以下是我的代码：

var template = window.app.getTemplate('myTemplate');
var image = {id: imageId, name: imageName, imageList: imageTypes, extension: ext, thumbNail: thumbNailPath};
$("#MyTable tbody:first").append(template(image));

如果我的模板设置如下：

<tr>
   <td>
      <table>
        <tr>
          <td></td>
        </tr>
        <tr>
           <td></td>
        </tr>
     </table>
   </td>
<tr>
</tr>
   <td></td>
</tr>

我的表MyTable设置如下：

<table id="MyTable" data-attr="images">
    <thead>
    </thead>
    <tbody>       
    </tbody>
</table>

就像我之前所说的，当出现追加时，如果在tbody内有多个表格，则所有tbody都会被追加。那么，如何只选择第一个？

谢谢

- jason

---

你可以使用“>”运算符来查找tbody，如$("#MyTable > tbody")。 - D.T.

tbody:first 应该可以防止在所有 tbody 上进行附加... 你能重现这个问题吗？我不能。 - Karl-André Gagnon

Answer 1

JQuery使用CSS选择器来找到元素。

$("#MyTable > tbody:first")

E > F 是CSS选择器中的一种，它匹配的是E元素的子元素中所有的F元素。想要了解更多，请查看http://www.w3.org/TR/CSS2/selector.html#child-selectors。

- Spokey

Answer 2

也许您可以更新您的jQuery选择器。

$("#MyTable > tbody:first")

- Jorge Vivas

Answer 3

尝试：

$("#MyTable > tbody").append(template(image));

- Vikram Deshmukh