Question

给定绝对或相对位置（顶部和左侧）是否有任何方法可以获得最接近这些坐标的html元素？

或者，有没有办法制作一个选择器（或使用一些jQuery构造）来枚举元素，然后找到哪个是关闭提供的坐标？假设元素集很小且有限。

Answer 1

我已经构建了一个jQuery方法，它在集合中返回最接近offset的元素：

jQuery.fn.closestToOffset = function(offset) {
    var el = null,
        elOffset,
        x = offset.left,
        y = offset.top,
        distance,
        dx,
        dy,
        minDistance;
    this.each(function() {
        var $t = $(this);
        elOffset = $t.offset();
        right = elOffset.left + $t.width();
        bottom = elOffset.top + $t.height();

        if (
            x >= elOffset.left &&
            x <= right &&
            y >= elOffset.top &&
            y <= bottom
        ) {
            el = $t;
            return false;
        }

        var offsets = [
            [elOffset.left, elOffset.top],
            [right, elOffset.top],
            [elOffset.left, bottom],
            [right, bottom],
        ];
        for (var off in offsets) {
            dx = offsets[off][0] - x;
            dy = offsets[off][1] - y;
            distance = Math.sqrt(dx * dx + dy * dy);
            if (minDistance === undefined || distance < minDistance) {
                minDistance = distance;
                el = $t;
            }
        }
    });
    return el;
};

注意：

如果偏移其中一个元素，则会返回。
我正在循环四个偏移，因为这样可以提供最佳的精确度。

像这样使用：

$('div.myCollection').closestToOffset({left: 5, top: 5});

Answer 2

我能想到的最好方法是使用一个搜索函数循环遍历所有现有元素并比较坐标，始终保留最近变量的副本。

这就是我想到这样做的方式，以及如果我受到你的约束我会怎么做。

Answer 3

循环遍历所有元素非常简单：

function getClosestElement(x, y) {
    var elements, el, offset, dist, i, minDist, closestEl;

    elements = $("body *");
    closestEl = elements.eq(i);
    offset = closestEl.offset();
    offset.left += el.outerWidth()/2; // center of object
    offset.top += el.outerHeight()/2; // middle of object
    minDist = Math.sqrt((offset.left - x)*(offset.left - x) + (offset.top - y)*(offset.top - y));

    for (var i=0; i < elements.length; i++) {
        el = elements.eq(i);
        offset = el.offset();
        offset.left += el.outerWidth()/2; // center of object
        offset.top += el.outerHeight()/2; // middle of object
        dist = Math.sqrt((offset.left - x)*(offset.left - x) + (offset.top - y)*(offset.top - y));
        if (dist < minDist) {
            minDist = dist;
            closestEl = el;
        }
    }

    return closestEl;

Answer 4

我使用@Felix答案并将其应用于我的香草Js，我知道这是一个老问题，但是是否有人需要它

function getClosestChoice(x, y, elements) {
  let closestEl,
    minDist,
    offset;

  elements.forEach((el) => {
    offset = { left: el.offsetLeft, top: el.offsetTop };
    offset.left += el.offsetWidth / 2;
    offset.top += el.offsetHeight / 2;
    const dist = Math.sqrt(
      (offset.left - x) * (offset.left - x) + (offset.top - y) * (offset.top - y)
    );
    if (!minDist || dist < minDist) {
      minDist = dist;
      closestEl = el;
    }
  });
  return closestEl;
}

Answer 5

或者尝试原始的jQuery函数offsetparent()。从这个页面来看下一个例子：

$( "li.item-a" ).offsetParent().css( "background-color", "red" );

找到最接近位置的html元素（相对或绝对）

5 个答案: