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> 没有有条件地添加，当没有错误时我得到一个带边框的背景。

我想添加检查是否<p class="err"></p>不为空的 jquery，然后添加类 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/