Функция изменения jQuery для скрытых дочерних элементов

Question

Я работаю над страницей, которая отображает и скрывает элементы на основе фильтров, то есть устанавливает элементы списка в display:block или display:none на основе критериев - и я хотел бы отобразить сообщение, когда нет товаров которые показываются (например, «извините, ни один из элементов не соответствуют вашим критериям».) Если мой список выглядит следующим образом:

<ul class="list"> 
    <li class="item">Item 1</li> 
    <li class="item">Item 2</li> 
    <li class="item">Item 3</li> 
</ul> 

Я пробовал функцию следующих change на основе этого SO thread:

$("body").on('change', function() { 
 
    if ($('.list').children(':visible').length == 0) { 
 
    console.log('none visible'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list"> 
 
    <li class="item">Item 1</li> 
 
    <li class="item">Item 2</li> 
 
    <li class="item">Item 3</li> 
 
</ul>

Но он, похоже, не работает? Любая помощь здесь очень ценится.

Answer 1

Возможно, я что-то пропустил, но если звучит так, как всегда, вы можете просто сделать простой length при загрузке страницы.

if ($('.list li').length = 0) { 
console.log('none visible'); 
} 

http://codepen.io/justdan/pen/EggZQx

Answer 2

Вы не показали нам фильтры, которые вызывают событие изменения, поэтому я составил примерный входной фильтр:

<ul class="list"> 
    <li class="item">Item 1</li> 
    <li class="item">Item 2</li> 
    <li class="item">Item 3</li> 
</ul> 
<input type="text" class="filter"> 

Чтобы вызвать событие и журнал когда нет элементов списка:

$(".filter").on("blur", function() { 
    if ($('.list').children(':visible').length == 0) { 
    console.log('none visible'); 
    } 
}); 

Here is a Fiddle Demo.

Конечно, вам может потребоваться настроить тип события - это зависит от того, какой тип элементов является фильтром. В моем примере я использовал элемент ввода, и поэтому blur является подходящим событием.

Если ваши фильтры являются элементами ссылок внутри div с классом filter, то click будет подходящим событием.

$(".filter a").on("click", function() { ...