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

Question

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

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

Answer 1

Check the length property of the returned elements.

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

EDIT: hidden on visible

---

EDIT: Explained the use of the .length property for boolean testing. Please see further explanation at the bottom of this answer.

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

! gives a negative value of its true / false value.

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

When you place ! behind it, this boolean will change to true . Therefore, if no visible elements are found, the code in your if() will be launched.

This is exactly the same as doing:

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

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

---

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

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

---

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

Here are some examples of values ​​that are 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 a few 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 of any value, put !! in front of him.

 alert( !!123 ); // Alerts true 

First one ! converts a value as opposed to its effective logical value. Second one ! converts it back to its effective boolean value.

For instance:

 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

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

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

Answer 3

You can do this:

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

Answer 4

I think this is what you want

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