Question

I have a list of divs similar to the simplified code below, which I’ve set up with a filter via a dropdown (so if you select an option in the drop down, all of the divs that don’t match are set to display:none).

<div id="productlist">
   <div class="product book">Title</div>
   <div class="product book">Title</div>
   <div class="product game">Title</div>
   <div class="product movie">Title</div>
   <div class="product game">Title</div>
</div>

In the event that there are no matches however, I’d like to display a message stating as such.

Is there a way of setting an if statement, that if all divs that match the class “product” (or if all immediate children of #productlist) are set to display:none, to show the message?

Thanks

Answer 1

This is achieved through the use of the :visible selector and the .length method such as so

if ($('.product:visible').length == 0)
{
    alert('No visible products found.');
}