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>

现在，如果我想选择所有textareas，我会使用自然语言执行以下操作：give me all elements which are textareas, with the following ids：

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

但它给了我一个空洞的结果。相反，我必须重新排列这样的选择器，这是一种自然语言give me all elements with the ids, and which are textareas：

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

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

Answer 1

你想要这个，没有额外的空间：

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

将空格用作：$("textarea [id^=panel_comments_]")表示选择textarea中包含ID的所有元素。

使用：$("[id^=panel_comments_] textarea")表示选择ID中的所有textarea，ID以选择器字符串开头。

遵循BoltClock的注释，必须在任何额外的过滤器选择器之前使用类型选择器，这意味着：

$("textarea[id^=panel_comments_]")有效
$("[id^=panel_comments_]textarea")无效

Answer 2

这里的空间很重要，它是descendant selector。省略它：

textarea[id^=panel_comments_]

[id^=panel_comments_] textarea似乎有用的原因是它选择ID为div的 panel_comments 元素，然后查找作为其后代的所有textareas。因此，这仅“偶然”起作用，因为div和textarea具有相似的ID。如果你给div元素一个完全不同的ID，那就不行了。

CSS选择器用于层次结构，如HTML，因此“子选择器”的顺序很重要。

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

一个简单的选择器是类型选择器或通用选择器，后面紧跟零个或多个属性选择器， ID选择器< / em>，或伪类，任何顺序。

Answer 3

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

删除多余的空间

jQuery选择器：选择器的顺序重要吗？

3 个答案: