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 を持つ要素を[id^=panel_comments_] textarea選択し、その子孫であるすべてのテキストエリアを見つけるためです。と のID が似ているため、これは「偶然」にしか機能しません。要素にまったく別の IDを指定した場合、機能しませんでした。divpanel_commentsdivtextareadiv

CSS セレクターは、HTML のような階層構造で機能するため、「サブセレクター」の順序が問題になるのは当然のことです。

要素間の関係を表現したくない場合のみ、順序はほとんど問題になりません:

単純なセレクターは、タイプ セレクターまたはユニバーサル セレクターのいずれかであり、その直後に 0 個以上の属性セレクター、ID セレクター、または疑似クラスが任意の順序で続きます。

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

その余分なスペースを削除します

于 2013-05-29T09:46:30.587 に答える