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现在都是一个由icontext组成的迷你表。它现在需要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元素可见时，它比很少可见时慢得多。然而，现在没有比它工作得很快时更多的行了，也就是说，在表格放入每行之前

非常感谢您的任何建议，但请不要要求我发布的代码超过我的代码：

谢谢。

试试：

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

---

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

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

您需要发布一个相关标记的示例，根据您所说的，它有问题。A只能有LI子元素，H4正在更正错误，因此您没有您认为的结构。另外，表格里的内容格式是不必要的，请使用CSS。哦，H4不能将LIs作为子节点，它们必须有UL或OL父节点。用nowrap代替table怎么样？还有，为什么不在隐藏孩子时隐藏家长h4，而不是反过来呢？好的，谢谢。我将检查标记并返回到这一个。@RobG我只是使用文档片段和不可靠的内部HTML重新构建了标记，但它仍然很慢，所以我认为这不是问题所在。至少我现在可以对我的代码感到公正。我还制作了这样的结构，每个h4元素后面都跟有只包含li项的ul。不过，我不确定CSS not表格解决方案。我想包装，但只有在自己的专栏，所以NoRAP是不适合的，我认为。如果你张贴了一个例子的标记，并添加一个CSS标签，有人会帮助你，这是我陷入混乱的基础！我通过不同的类隐藏和显示东西，但是现在我需要确定是否还有任何东西在显示：另一件事是，在我把表放到队列中之前，它并没有那么昂贵。这才是真正的难题。我可以删除该表，它工作得很好。我已经勾选了答案，以表彰这里和上面的评论中的好建议，尽管没有人真正回答我提出的问题：我已经取出该表并重新格式化了标记，这很好地解决了问题。