Vraag Zoek html-element dat zich het dichtst bij positie bevindt (relatief of absoluut)


Gegeven de absolute of relatieve positie (boven en links) is er een manier om het dichtstbijzijnde html-element bij deze coördinaten te krijgen?

Of alternatief, is er een manier om een ​​selector te maken (of een bepaald jQuery-construct te gebruiken) om elementen op te sommen en vervolgens te achterhalen welke de juiste coördinaten zijn? Stel dat de verzameling elementen klein en eindig is.


21
2018-02-25 21:08


oorsprong


antwoorden:


Ik heb een jQuery-methode gebouwd die het dichtstbijzijnde element retourneert om te compenseren, binnen de verzameling:

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

Opmerkingen:

  1. Als de offset is binnen een van de elementen, het zal worden teruggestuurd.
  2. Ik loop door vier offsets, omdat dit de beste nauwkeurigheid oplevert.

Gebruik het als volgt:

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

20
2018-02-25 21:30



De beste manier om dit te doen is om een ​​zoekfunctie-lus te hebben die alle bestaande elementen doorzoekt en de coördinaten vergelijkt, waarbij altijd een kopie van de dichtstbijzijnde variabele wordt bewaard.

Dat is de manier waarop ik dit kan bedenken en wat ik zou doen als ik onder uw beperkingen zou zijn.


1
2018-02-25 21:14



Het doorlopen van alle elementen is vrij eenvoudig:

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
2018-02-25 21:26



Of probeer de originele jQuery-functie offsetparent (). Van deze pagina komt het volgende voorbeeld:

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

-1
2018-05-31 12:57