jQuery：计算可见元素 - 效率/速度问题

我有一些代码可以正常工作，但它变得太慢了：

HTML:

我有一个容器，里面大约有 50 个ul元素。每个ul元素有一个h4标题后面跟着一系列li元素。如果没有可见的行元素，该函数将隐藏标题。

JavaScript/jQuery：

            function show_or_hide_headings() {
                $('#container').children('ul').each(function (i) {
                    var $this = $(this),
                        $h4 = $this.children(':first');
                    if ($this.children('li:visible').length) {
                        $h4.show();
                    } else {
                        $h4.hide();
                    }
                }); 
            }

在我改变了它的性质之前，它的工作效果还算可以接受li元素。每个li现在是一个迷你表，包括<table><tr><td>icon</td><td>text</td></tr></table>。现在处理需要 2 秒，而之前只需不到半秒。 （表格的作用是阻止图标下方的文本换行。）

我承认我不太明白为什么要在每个元素中添加额外的元素li应该会减慢 DOM 处理速度，因为我已经使用了.children选择器只深入一层 DOM。

我也尝试过：

                $('#container').find('h4').each(function (i) {
                    var $this = $(this);
                    if ($this.siblings('li:visible').length) {
                       $this.show();
                    } else {
                       $this.hide();
                    }
                }); 

and $('#container').children().children('h4')为了更好的衡量。

值得注意的是，当有很多li元素可见时，它比很少可见时要慢得多。然而，现在的行数并不比它运行得相当快时（即，在将表格放入每行之前）多。

非常感谢任何建议，但请不要要求我发布比我拥有的更多的代码:)

Thanks.

我怀疑确定一个元素是否可见是相当昂贵的。考虑添加和删除类来隐藏或显示元素。然后你可以直接根据类来选择它们，这大多是由主机支持的按类名获取元素 or 查询选择器全部 method.