Question

我正在使用jQuery从搜索字段中获取字符串并隐藏不匹配的项目。它遍历一个div列表并使用$（this）.fadeOut（）;隐藏这些元素。

这非常有效，但我想在该搜索中添加更多搜索。我添加了一个额外的搜索字段，但当然它不会继承之前搜索的淡出效果，而是从头开始。

我需要一种方法来指定搜索只搜索列表中的可见元素。这需要以相反的顺序工作，因为用户可能会在第二个搜索字段中输入，然后是第一个搜索字段。

这是我的代码说明问题的JSFiddle

一个搜索功能的代码片段

 $("#filter").keyup(function () { 
        var filter = $(this).val(),
        count = 0;
 $(".records2 div").each(function () {
 // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).fadeOut();

            // Show the list item if the phrase matches and increase the count by 1
        } else {
            $(this).show();
            count++;
        }
  });
  });

Answer 1

您可以使用：

element.is(":visible")

测试给定元素是否可见。

所以在你的情况下你只是这样做：

if ($this).is(":visible")); {count++;}

或者您可以在选择器的末尾添加“：visible”以仅选择可见项目：

$(".someselector div:visible").each(...);

编辑：我刚检查了jquery文档。如果你这样做，你会获得更好的表现：

$(".someselector div").filter(":visible").each(...);

这是因为:visible不是CSS规范的一部分，所以jquery必须手动实现它。

Javascript：如何仅对可见元素执行计数？

1 个答案: