Как найти, если все соответствующие элементы отображаются: нет?

Question

У меня есть список div, похожий на упрощенный код ниже, который я настроил с помощью фильтра через раскрывающийся список (поэтому, если вы выберете опцию в раскрывающемся списке, все div, которые не совпадают, установить для отображения: нет).

<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>

Однако, если совпадений нет, я бы хотел отобразить сообщение с указанием такового.

Есть ли способ задать оператор if, чтобы, если все div-ы, которые соответствуют классу "product" (или если все непосредственные потомки #productlist) были настроены на отображение: none, чтобы показать сообщение?

Спасибо

Answer 1

Это достигается с помощью селектора :visible и метода .length, например,

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

Answer 2

Использование метода is проясняет ваши намерения:

if (!$('.product').is(':visible')) {
  alert('No visible products found.');
}

is(':visible') возвращает истину, если любой из выбранных элементов div, поэтому оператор if(!$('.product').is(':visible')) будет запускать только то, что ни один из элементов div не виден.