jQuery：计算可见元素 - 效率/速度问题 [英] jQuery: counting visible elements - efficiency/speed problems

问题描述

我有一些代码可以正常工作，但速度太慢了：

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

HTML：

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

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.

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

在我改变了<$ c $的性质之前，它的工作非常可接受c> li 元素。每个 li 现在是一个迷你表，包括< table>< tr>< td> icon< / td>< td> text< / TD>< / TR>< /表> 。它现在需要2秒钟才能完成，而之前的工作时间不到半秒。 （该表用于停止文本环绕图标。）

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 应该减慢DOM的处理速度，因为我已经使用 .children 选择器只能深入到一个DOM层。

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.

我也试过：

                $('#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 <时/ code>元素可见，它比很少可见的要慢得多。然而，现在没有更多的线，比它工作得非常快（即，在每张线放入桌子之前）。

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).

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

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

谢谢。

推荐答案

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

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.

这篇关于jQuery：计算可见元素 - 效率/速度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！