Question

我正在寻找最佳方法来查找位于页面顶部的像素范围内的所有元素。

我现在已经完成了这个非常简单的inRange测试

function inRange(el, from, to) {
  var top = el.offset().top;

  // if el is above from
  if(top < from) {
    return false;
  }

  // if el is below to
  if(top > to) {
    return false;
  }

  // el is in range
  return true;
}

我使用

之类的东西

$(".search").each(function() {
  var el = $(this);
  el.toggleClass('found', inRange(el, 40, 50));
});

，这确实有效。但是，如果有大量元素与查询匹配，在这种情况下.search，则效率非常低。

有更好的方法吗？

Answer 1

我的第一个想法是使用原生for循环而不是$.each。如果您测量结果，您可以看到它实际上非常重要（95% faster）。这样做：

var $search = $(".search");
for (var i = 0; i < $search.length; i++) {
    if (inRange($search[i], 40, 50)) {
      $($search[i]).toggleClass('found', true);
    }
}

初始化少得多的jQuery对象，并利用浏览器为您优化的本地for循环。

Answer 2

您的功能inRange()可以简化为：

function inRange(el, from, to) {
  var top = el.offset().top;
  return top >= from && top <= to;
}

您必须使用jsPerf或类似的工具进行衡量，以了解性能差异的大小。

Javascript按位置查找元素

2 个答案: