jQuery 选择器 : is the order of selectors important?

Question

我有一个 html 文档，如下所示:

<div id="panel_comments">
  <table id="panel_comments_table">
    <tr>
      <td style="width: 150px;">Monday: </td>
      <td><textarea id="panel_comments_monday" rows="4" cols="60" >Monday comment area</textarea></td>
    </tr>
    .. same with the other 6 weekdays
  </table>
</div>

现在，如果我想选择所有文本区域，我会执行以下操作(使用自然语言):给我所有文本区域元素，并具有以下 id:

$("textarea [id^=panel_comments_]")

但它给了我一个空结果。相反，我必须像这样重新排列选择器，这是一种自然语言 给我所有带有 id 的元素，它们是文本区域:

$("[id^=panel_comments_] textarea")

为什么选择器的顺序很重要？

Answer 1

这里的空格很重要，它是 descendant selector 。省略它即可:

textarea[id^=panel_comments_]

<小时/>

[id^=panel_comments_] textarea 似乎起作用的原因是它选择 ID 为 panel_comments 的 div 元素 然后找到它的后代的所有文本区域。因此，这只是“偶然”起作用，因为 div 和 textarea 具有相似的 ID。如果您给 div 元素一个完全不同的 ID，它就不会起作用。

<小时/>

CSS 选择器适用于分层结构，例如 HTML，因此“子选择器”的顺序很重要是合理的。

仅当您不想表达元素之间的关系时，the order almost doesn't matter :

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order.