jquery check元素不是空的更改类

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/