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

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

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