jQuery检查元素不为空更改类

Question

When p.err is not empty I want to add the class 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; }

The app I am using adds an error msg over a form like this <p class="err"><?php get(error_msg) ?></p>

It is added to the page whether there is an error or not. As soon as there is an error <p class="err">Your first name is missing</p> , p.err decorates the contents of the <p> tag.

I want to wrap the error in a border and a background. The problems is because <p class="err"></p> is not conditionally added, I get a bordered background when there it no error.

I want to add jquery that checks if <p class="err"></p> is not empty and then add the class p.err-wrapper, ie <p class="err err-wrapper"></p> .

I got it kind of working but i am so new at jquery.

Answer 1

You can use :not and :empty selectors.

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

http://jsfiddle.net/QYaJC/

Answer 2

Try using:

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

The function passed as filter will trim any empty white spaces in the content.

You can se a working demo here: http://jsfiddle.net/FNgDF/