Найдите элемент HTML ближайшим к позиции (относительный или абсолютный)

Question

Найдите элемент HTML ближайшим к позиции (относительный или абсолютный)

Учитывая абсолютное или относительное положение (вершина и оставленный) там какой-либо способ получить ближайший элемент HTML к этим координатам?

Или поочередно, там какой-либо способ обработать селектор (или использовать некоторую конструкцию jQuery), чтобы перечислить элементы и затем найти, который является завершениями к обеспеченным координатам? Предположите, что набор элементов является маленьким и конечным.

22

javascript jquery html

задан psychotik 25 February 2010 в 21:08

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;

1

ответ дан 29 November 2019 в 05:38

Лучший способ, который я могу придумать для этого, - создать цикл функции поиска, который перебирает все ваши существующие элементы и сравнивает координаты, постоянно сохраняя копию ближайшей переменной.

Вот как я могу думать об этом и что бы я сделал, если бы был в ваших условиях.

1

ответ дан 29 November 2019 в 05:38

Другие вопросы по тегам:

javascript jquery html

Похожие вопросы:

score 21 · Accepted Answer

Я создал метод jQuery, который возвращает ближайший к смещению элемент в коллекции:

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});