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

这是因为如果没有提供tbody元素,Firefox会自动添加元素tr.你真的不能用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>在你的表元素是一个很好的习惯进入.