[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の移行・構築はプロにおまかせ

サーバーからAWSへの移行も新規構築も初期費用無料です。
面倒なサーバー業務は全てお任せください。

くわしく読む