我有一些代码,它可以正常工作,但速度太慢了:
HTML:
我有一个容器,其中包含大约50个ul元素。每个ul元素都有一个h4标题,后面跟着一系列的li元素。如果没有可见的行元素,则该函数隐藏标题。
Javascript / jQuery:
直到我改变了元素的性质,它一直工作得非常可接受。每个 现在都是一个迷你表格,包括
。现在需要2秒钟来处理,而之前只需要不到半秒钟。(表格存在是为了防止文本在图标下换行)
我承认我不太明白为什么将额外的元素添加到每个 中会使DOM处理变得如此缓慢,因为我使用了.children选择器,只深入了一个DOM层。
我也尝试过:
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();
}
});
}
直到我改变了
图标 | 文本 |
我承认我不太明白为什么将额外的元素添加到每个
我也尝试过:
$('#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
元素后面跟着只包含li
项的ul
。不过,我不确定CSS非表格解决方案。我想要换行,但只在自己的列中(因此我认为不适合nowrap)。 - Nick