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

直到我改变了

元素的性质，它一直工作得非常可接受。每个

现在都是一个迷你表格，包括

图标

文本

。现在需要2秒钟来处理，而之前只需要不到半秒钟。(表格存在是为了防止文本在图标下换行)

我承认我不太明白为什么将额外的元素添加到每个

中会使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元素时，速度比仅有少量可见时要慢得多。现在没有更多的行了，但它比之前快得多（即，在将表格放入每一行之前）。

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

谢谢。

- Nick

---

你需要发布相关标记的示例，根据你所说，它存在问题。UL 只能有 LI 子元素，H4 正在进行错误纠正，因此您没有想象中的结构。此外，使用表格来格式化 LI 的内容是不必要的，应该使用 CSS。哦，还有，H4 不能有 LIs 作为子节点，它们必须有 UL 或 OL 父级。 - RobG

不使用表格，而使用nowrap怎么样？此外，为什么不在隐藏子元素时同时隐藏父级h4，而不是反过来呢？ - mplungjan

好的，谢谢。我会检查标记并回复您。 - Nick

@RobG 我刚刚使用文档片段重新构建了标记，没有使用不良的内部HTML，但它仍然很慢，所以我认为这不是问题所在。（至少现在我可以对我的代码感到正义了。）我还使结构如此，每个h4元素后面跟着只包含li项的ul。不过，我不确定CSS非表格解决方案。我想要换行，但只在自己的列中（因此我认为不适合nowrap）。 - Nick

如果您发布您的标记示例并添加CSS标签，会有人帮助您解决此问题。 - RobG

Answer 1

我怀疑判断一个元素是否可见相当耗费资源。考虑添加或删除隐藏或显示元素的类。然后，您可以基于该类直接选择它们，这将大多数情况下受到主机getElementsByClassName或querySelectorAll方法的支持。

- RobG

---

这是我陷入困境的基础！我正在通过各种类来隐藏和显示东西，但现在我需要确定是否仍有任何东西正在显示 :) 另一件事是，在将表格放入行中之前，它并不那么昂贵。这是真正的难题。我可以删除表格，它就能正常工作。 - Nick

我已经勾选了答案，以表扬这里和上面评论中的好建议，尽管没有人真正回答了我提出的问题 :) 我已经将表格删除并重新格式化了标记，这可以很好地解决问题。 - Nick

Answer 2

尝试:

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

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

- adeneo