Question

Say I have the following unordered list

<ul class="container">
  <li class="item" style="display: none;">first item</li>
  <li class="item">second item</li>
  <li class="item">third item</li>
  <li class="item">forth item</li>
</ul>

how can I carry out a task only if all the items in the container are hidden?

regards…

Answer 1

You can use the :visible selector to select the visible elements only. You can use the length property to check if there is zero or more. If it equals to zero, then all elements are hidden.

if ($('.container .item:visible').length == 0) {
    // All is hidden.
}