Question

我想知道是否有可能（在javascript或jquery中但没有任何插件）在当前视口中获取所有元素（例如表行tr）而不循环遍历每个元素？我发现了很多例子如何检查指定的元素是否在当前视口中，但我需要的是一个函数返回当前视口中所有元素的列表。我需要这个用于虚拟化，因为这个表应该具有无限的容量，并且从两百万行循环遍历每一行是非常低效的：）

有没有合理的方法可以做到这一点？

Answer 1

假设您没有对定位做任何事情，可以通过二分查找找到视口中的表行。例如，对于200000行，需要大约18个查找来查找页面上的第一行（jsfiddle，警告：加载缓慢）。这可以扩展为查找最后一个元素，或者您可以从第一个元素开始循环遍历元素，直到找到不再可见的元素。

var rows = table.children().children();
var start = 0;
var end = rows.length;
var count = 0;

while(start != end) {
    var mid = start + Math.floor((end - start) / 2);
    if($(rows[mid]).offset().top < document.documentElement.scrollTop)
        start = mid + 1;
    else
        end = mid;
}

显然，如果任何东西浮动，绝对定位等，这不会很好。简而言之：被搜索的节点必须按顺序排列rows[N-1].top <= rows[N].top。对于像表这样的东西，如果没有应用样式并且不存在多行单元格，则应该为真。

获取视口Javascript中的所有元素

1 个答案: