这是 jQuery 如何处理子选择器的错误吗？

Question

jQuery 处理子选择器的方式是否存在错误，或者我是否遗漏了一些明显的东西？当孩子不是* 时，我无法让它工作。

这是我正在运行的 jQuery 选择器：

$("#myTable > tr").each(function() {
    // do somthing }
);

而表结构为：

<table id="myTable">
    <tr>
        <td><button>someButton</button></td>
        <td><textarea>...</textarea></td>
    </tr>
</table>

没有元素与上述选择器#myTable > tr 匹配。但是下面列出的两个选择器工作正常。

$("#myTable tr") // search all descendants for tr

或使用通配符匹配子项：

$("#myTable > *") // search all child elements

关于这里可能出现什么问题的任何想法？

感谢各位快速解答！可惜只能选一个。

Answer 1

这是因为如果没有提供，Firefox 会自动在您的 tr 元素周围添加 tbody 元素。你真的不能用table > tr。

你有：

<table id="myTable">
    <tr>
        <td><button>someButton</button></td>
        <td><textarea>...</textarea></td>
    </tr>
</table>

但 Firefox 看到了这一点：

<table id="myTable">
  <tbody>
    <tr>
        <td><button>someButton</button></td>
        <td><textarea>...</textarea></td>
    </tr>
  </tbody>
</table>

其他元素也可以正常工作：

<div>
  <strong>Hi</strong>
</div>

还有选择器：

alert( $("div > strong").text() ); // Alerts "Hi"

Answer 2

有一个隐含的<tbody>元素添加了含义而不是：

<table id="myTable">
  <tr>
    <td><button>someButton</button></td>
    <td><textarea>...</textarea></td>
  </tr>
</table>

DOM 实际包含：

<table id="myTable">
<tbody>
  <tr>
    <td><button>someButton</button></td>
    <td><textarea>...</textarea></td>
  </tr>
</tbody>
</table>

所以改成：

$("#mytable > tbody > tr");

在表格中使用<tbody>、<thead> 和<tfoot> 元素是一个好习惯。

Answer 3

是的，Doug 完全正确。只是为了补充他的答案，也许您知道，也可能不知道，但请记住 jQuery 遍历 DOM，而不是您发送到浏览器的 HTML“文本”。

DOM 是浏览器对您发送给它的 HTML 的解释。