1

我有一个看起来像这样的 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>

现在，如果我想选择所有文本区域，我会使用自然语言执行以下操作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")

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

4

3 回答 3

3

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

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

使用空格作为：$("textarea [id^=panel_comments_]")表示选择文本区域内所有具有 ID 的元素。

Using:$("[id^=panel_comments_] textarea")表示选择 ID 以您的选择器字符串开头的元素内的所有文本区域。

按照 BoltClock 的评论，类型选择器必须在任何额外的过滤器选择器之前使用，这意味着：

  • $("textarea[id^=panel_comments_]")已验证
  • $("[id^=panel_comments_]textarea")无效
于 2013-05-29T09:46:04.367 回答
3

这里的空间很重要，它是后代选择器。只需省略它：

textarea[id^=panel_comments_]

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

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

只有当您不想表达元素之间的关系时，顺序几乎无关紧要：

简单选择器是类型选择器或通用选择器，后跟零个或多个属性选择器、ID 选择器或伪类，顺序不限。

于 2013-05-29T09:46:24.063 回答
1 
$("textarea[id^=panel_comments_]")

删除多余的空间

于 2013-05-29T09:46:30.587 回答