[jQuery]複数のクラスを持つ場合の要素指定において気をつけるべきこと

<input id="tenant_fee4_0" name="tenant_fee[4][]" value="50" type="text" size="20" class="digits required">

のあとに

<label generated="true" class="error" id="validate">25から100までの値を入力してください。</label>

を追加するような状況を考えていましたが、この際に要素のセレクタの指定において苦労しました。

jQuery('#tenant_fee4_0 .digits required').after('<label generated="true" class="error" id="validate">25から100までの値を入力してください。</label>');

で 試したところうまくいきません。

jQuery('#tenant_fee4_0 .required').after('<label generated="true" class="error" id="validate">25から100までの値を入力してください。</label>');
jQuery('#tenant_fee4_0 .digits').after('<label generated="true" class="error" id="validate">25から100までの値を入力してください。</label>');

でも試してみましたが、うまくいきませんでした。結果としてはid="tenant_fee4_0"を持つ要素が1つのみであったため、以下のコードでうまくいくことができました。
jQuery('#tenant_fee4_0').after('<label generated="true" class="error" id="validate">25から100までの値を入力してください。</label>');
では、id="tenant_fee4_0"を持つ要素が複数の場合はどうなるのでしょうか。調べてみたところ、複数の要素が存在する場合は以下のコードで実行することができるみたいです。
jQuery('#tenant_fee4_0 .digits,.required').after('<label generated="true" class="error" id="validate">25から100までの値を入力してください。</label>');

複数のクラスを保つ場合は、スペースをそのまま開けるのではなく、”,”でつなぐことで指定を行うことができるみたいです。

AWS構築サービスの全てをまとめた資料を公開中

ハックノート(TOWN株式会社)では、AWSの導入や構築支援を行っています。AWS導入メニューやサービス詳細、構成例や費用を掲載した資料をダウンロードできます。

AWSの新規導入やAWSへの移行を検討の際は、ぜひご参考ください。


APNコンサルティングパートナー

TOWN株式会社はAmazon公認コンサルティングパートナーです。