javascript - jqueryチェック要素が空ではない変更クラス

Question

p.errが空でない場合、クラスp.err-wrapperを追加します。

<p class="err err-wrapper">not empty</p>
<p class="err"></p>


p.err {color:#ff0000, font-weight: bold; }
p.err-wrapper {background:#ffffdd; border:1px solid #ff0000; }

私が使用しているアプリは、このようなフォームにエラーメッセージを追加します<p class="err"><?php get(error_msg) ?></p>

エラーの有無にかかわらずページに追加されます。エラーが発生するとすぐに<p class="err">Your first name is missing</p>、p.errが<p>タグの内容を装飾します。

エラーを境界線と背景でラップしたいと思います。問題は、<p class="err"></p> 条件付きで追加されていないため、エラーがない場合に境界線の背景が表示されるためです。

空でないかどうかをチェックするjqueryを追加してから<p class="err"></p>、クラスp.err-wrapper、つまりを追加したいと思い<p class="err err-wrapper"></p>ます。

私はそれをある程度機能させましたが、jqueryはとても新しいです。

Answer 1

:notと:emptyセレクターを使用できます。

$('p.err:not(:empty)').addClass('err-wrapper');

http://jsfiddle.net/QYaJC/

Answer 2

使用してみてください：

$("p.err")
.filter(function(){return $(this).text().replace(/\s/g,"").length!=0})
.addClass("err-wrapper")​​​​​​​​;​​​​​​

フィルタとして渡された関数は、コンテンツ内の空の空白を削除します。

ここで実用的なデモを見ることができます：http：//jsfiddle.net/FNgDF/