jquery selector question: do something only if all elements are hidden

Question

I need to do something only if all the li's in a given ul are hidden.. this doesn't seem to do the trick. is there a way?

if ($('#some_ul li:hidden')) {
  // do something only if all 'li's in a given ul are hidden
}

Answer 1

Check the length property of the elements returned.

if ( !$('#some_ul li:visible').length ) {
  // do something only if all 'li's in a given ul are hidden
}

EDIT: changed hidden to visible

---

EDIT: Clarification on the use of the .length property for a boolean test. Please see further explanation at the bottom of this answer.

$('#some_ul li:visible').length returns the number of elements found. Numeric values equate to true or false.

The ! gives you the negative of its true/false value.

So if $('#some_ul li:visible').length find 0 visible elements, that is just the same as returning false.

When you place ! behind it, it's boolean value is reversed to true. So if no visible elements are found, the code in your if() will run.

It is exactly the same as doing:

if ( $('#some_ul li:visible').length == 0 ) {
  // do something only if all 'li's in a given ul are hidden
}

...which takes the numeric value of $('#some_ul li:visible').length and turns it into a boolean value using the == operator.

---

To use :hidden you would need to first get the total length, then compare it to the hidden length.

var total = $('#some_ul li');

if ( $('#some_ul li:hidden').length == total ) {
  // do something only if all 'li's in a given ul are hidden
}

---

EDIT: In response to your comment, for clarification, there are several values that will equate to true/false in a test.

Here are some examples of values that equate to false:

var someVariable;  // someVariable is undefined, equates to false

var someVariable = '';   // someVariable is an empty string, equates to false

var someVariable = false; // someVariable is a boolean false, equates to false

var someVariable = 0;  // someVariable is number zero, equates to false

var someVariable = Number('a');  // someVariable is NaN (Not a Number), equates to false 

var someVariable = null;   // someVariable is null, equates to false

Here are some examples that equate to true:

var someVariable = "false";   // someVariable is a string, equates to true

var someVariable = 123;   // someVariable is a number greater than 0, equates to true

var someVariable = -123;   // someVariable is a number less than 0, equates to true

var someVariable = true;   // someVariable is a boolean true, equates to true

var someVariable = !false;   // someVariable is a negated value that would
                             //    otherwise be false, equates to true

If you're curious about the effective boolean value of any value, place !! before it.

alert( !!123 );   // Alerts true

The first ! converts the value to the opposite of its effective boolean value. The second ! converts the it back to its effective boolean value.

For example:

var a;  // an undefined variable

alert( a );   // alerts undefined, logically equates to 'false'

alert( !a );   // alerts the boolean opposite of undefined, which is 'true'

alert( !!a );   // alerts the converts the boolean opposite 'true' back to 'false'

Answer 2

You can do like:

if ($('#some_ul li').is(':hidden')) {
  // do something only if all 'li's in a given ul are hidden
}

Answer 3

I'm thinking this is what you want

if ( $('#some_ul li:hidden').length == $('#some_ul li').length ) {
  // do something only if all 'li's in a given ul are hidden
}

Answer 4

$("ul:not(:has(li:visible))")

This selects those <ul> without visible <li> children. Check its length property to see if there are any at all, or call each() on it to do something to each of them.