Question

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

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

和$('#container').children().children('h4')以获得良好的衡量标准。

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

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

感谢。

Answer 1

尝试：

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

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

Answer 2

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

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

2 个答案: