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现在都是一个包含

icon

text

的迷你表。 它现在需要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方法支持。

Answer 2

尝试：

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

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