0

私はこのような多くのdivを持っています

<div class="msg_header msg_header_for-219 media data-message="219">
...
</div>

私が使う

$(".msg_header_for-<%= msg.id %>").css("background-color", "red");

特定の ID を選択して赤くします。

残りのdivを白くしたい

だから私は2行を持っています

$("[class~='msg_header_for']").css("background-color", "white");
$(".msg_header_for-<%= msg.id %>").css("background-color", "red");

私が理解しているように、最初のものはクラス名に msg_header_for を含むクラスを選択し、それを白にします。2 つ目は特定のものを選択し、赤く色付けします。

赤い部分が効いています。白いものはそうではありません。

最初のセレクターが機能しない理由がわかりません。なにが問題ですか？

4

3 に答える 3

4

jQuery ドキュメントから:

[attribute~='value']スペースで 区切られた、指定された単語を含む値を持つ、指定された属性を持つ要素を選択します。

したがって、適切なものが必要[attribute*='value']か、または探します。

于 2013-01-26T10:01:24.093 に答える
2

私が理解しているように、最初のものは、クラス名に msg_header_for を含む任意のクラスを選択します

しかし、あなたのクラス名はmsg_header_for-###では###なく数字msg_header_forです。正確なクラス名ではないため、数字を含むクラス名は選択されず、~=属性セレクターはスペースで区切られたトークンのみを検索し、他の記号は検索しません。つまり、属性セレクターは実際には(少なくとも HTML クラスの場合) と[class~='msg_header_for']同等です。.msg_header_for

プレフィックス付きのクラス名で選択する必要がある場合は、代わりにこれを使用できるはずです。

$("[class*='msg_header_for-']").css("background-color", "white");

より複雑なケースでは、この回答の別の例を使用できますが、マークアップが予測可能な場合は、おそらくそのような複雑なセレクターは必要ありません:

$("[class^='msg_header_for-'], [class*=' msg_header_for-']").css("background-color", "white");
于 2013-01-26T10:03:19.700 に答える
1

出典: http://www.w3.org/TR/CSS2/selector.html#matching-attrs

[att~=val]

値が空白で区切られた単語のリストである att 属性を持つ要素を表し、そのうちの 1 つは正確に「val」です。「val」に空白が含まれている場合、それは何も表しません (単語が空白で区切られているため)。「val」が空の文字列である場合、それは何も表しません。

できることは、それらすべてに共通のクラスを作成し、代わりにそのクラスを選択することです。

<div class="msg_header msg_header_for-100"></div>

その後：

$(".msg_header").css("background-color", "white");
$(".msg_header_for-<%= msg.id %>").css("background-color", "red");
于 2013-01-26T10:03:16.557 に答える