Javascript按位置查找元素

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

我的第一個想法是使用native for循環，而不是$.each 。 如果測量結果，您會發現它實際上是相當重要的（ 速度提高了95％ ）。 做這個：

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或類似工具中進行測量，以查看性能差異有多大。