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

I have some code that works fine but it's become too slow:

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

HTML:

HTML：

I have a container that contains about 50 ul elements. Each ul element has a h4 heading followed by a series of li elements. The function hides the heading if no line elements are visible.

我有一个包含大约50个ul元素的容器。每个ul元素都有一个h4标题，后跟一系列li元素。如果没有可见的线元素，该函数会隐藏标题。

Javascript/jQuery:

使用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();
                    }
                }); 
            }

It was working quite acceptably until I changed the nature of the li elements. Each li is now a mini table comprising <table><tr><td>icon</td><td>text</td></tr></table>. It now takes 2 seconds to process, whereas it previously worked in less than half a second. (The table is there to stop the text wrapping under the icon.)

在我改变了li元素的本质之前，它的工作非常可接受。每个li现在都是一个包含

icon	text 的迷你表。它现在需要2秒钟才能完成，而之前的工作时间不到半秒。 （该表用于停止文本环绕图标。）

I confess I can't quite understand why adding the additional elements into each li should slow down the DOM processing so much because I've used the .children selector to only go one DOM layer deep.

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

I've also tried:

我也尝试过：

                $('#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') for good measure.

和$（'＃container'）。children（）。children（'h4'）。

What is notable, too, is that when there are many li elements visible, it is much slower than when few are visible. There are no more lines now, however, than when it worked quite quickly (i.e., before the table was put into each line).

值得注意的是，当有许多可见的li元素时，它比很少可见的要快得多。然而，现在没有比它很快工作的那条线（即，在将表放入每一行之前）。

Any advice greatly appreciated, but please don't request I post more code than I have :)

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

Thanks.

谢谢。

2 个解决方案

#1

I suspect that determining if an element is visible or not is quite expensive. Consider instead adding and deleting a class to hide or show elements. Then you can select them directly based on the class, which will mostly be supported by a host getElementsByClassName or querySelectorAll method.

我怀疑确定元素是否可见非常昂贵。请考虑添加和删除类以隐藏或显示元素。然后，您可以根据类直接选择它们，主要由主机getElementsByClassName或querySelectorAll方法支持。

#2

try:

尝试：

$('h4', '#container').css('display', 'none').filter(function() {
    return $(this).siblings('li:visible').length;
}).css('display', 'block');

but I agree with RobG, you'r markup is probably incorrect.

但我同意RobG，你的标记可能不正确。