jQueryメモ:JQueryでcssの属性セレクタをつかう

電脳備忘録

下記のような微妙に違うクラス名が設定されているのだけど、それらすべてに同じスタイルをあてたいということがありました。

<div="item-no-003" class="item">
<p class="caption003">
説明文
</p>
</div>
<div="item-no-002" class="item">
<p class="caption002">
説明文
</p>
</div>
<div="item-no-001" class="item">
<p class="caption001">
説明文
</p>
</div>

cssの属性セレクタを使うことで対応できるとのことなので対応してみました。
captionで始まる(前方一致)クラスに対して複数のcssプロパティを設定しています。

$("[class^='caption']").css({"padding":"0 13px","margin-bottom":"15px"});

Queryには任意の範囲、要素を指定するためのセレクタと呼ばれる機能が用意されています。

jQueryのセレクタ解説

属性に関するセレクター(Selectors)の jQuery API リファレンス。

Attribute / 属性

後方一致と部分一致もあわせて覚えておけばいろいろできそうですね。

前方一致
$("[属性名^='値']")...特定の属性が特定した値で始まっている要素
後方一致
$("[属性名$='値']")...特定の属性が特定した値で終わっている要素
部分一致
$("[属性名*='値']")...特定の属性が特定した値を含んでいる要素

なかなか便利ですが、ごちゃごちゃにならない様にしっかり設計しておかないといけませんね。

Newer
Older
Dark
Light
menu