Question

我正在处理一个页面，该页面根据过滤器显示和隐藏元素 - 也就是说，根据条件将列表项设置为display:block或display:none - 并且我＆＃39; d当显示 no items 时显示消息（例如＆＃34;抱歉，没有元素符合您的标准＆＃34;。）如果我的列表如下所示：

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

我已根据此SO thread尝试了以下change功能：

＆＃13;

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

＆＃13;

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

＆＃13;

但它似乎没有起作用？非常感谢这里的任何帮助。

Answer 1

您还没有向我们展示触发更改事件的过滤器，因此我编写了一个示例输入过滤器：

<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是一个合适的事件。

如果您的过滤器是带有filter类的div中的链接元素，则click将是适当的事件。

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

Answer 2

我可能错过了一些内容，但是如果听起来像你一样只能在页面加载时进行简单的length检查。

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

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

jQuery更改隐藏子元素的功能

2 个答案: