javascript – 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>图标< / td>< td>文字< / 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();
                    }
                }); 

和$(‘#container’).children().children(‘h4’).

值得注意的是,当有许多可见的li元素时,它比很少可见的要快得多.然而,现在没有更多的线路比它工作得非常快(即,在将表放入每条线之前).

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

谢谢.

最佳答案

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