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>元素是一个很好的习惯。

Answer 3

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

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

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

3 个答案: