Jquery check if control is empty and display != "none", Why does not work?

Question

The following if statement.

emptyFields = false;
   $(".ClassNanme").each(function() {
      if(($.trim($(this).val()) == "") && ($(this).css('display') != 'none' ) {
        emptyFields = true;
    return false; // break out of the each-loop
      }
   });

But does not work, I don't know how to check if the css property display is set to none with jquery.

This if statement should pick when one of the objects are either empty or its css property display its not set to none.

Checking if the value is empty works, what I am stuck with is with checking if the object its hidden (or display:none).

Thanks.

Cesar.

Answer 1

You're looking for jQuery's visiblity selectors.

For example:

if ($(this).is(':hidden'))

Answer 2

   emptyFields = false;
   $(".ClassName").each(function() {
      if($.trim($(this).val()) === "" && $(this).is(":hidden")) {
        emptyFields = true;
        return false; // break out of the each-loop
      }
   });

Using is(":hidden") is, in my opinion, syntactically cleaner and easier to read than checking the actual CSS value. Give that a try.

Also, use === (type equality) when comparing with an empty string.

Edit: Gah, changing "visible" to "hidden" - my mistake.