Buscar el elemento html más cercano a la posición (relativo o absoluto)

Question

Dada la posición absoluta o relativa (arriba & izquierda) ¿hay alguna forma de obtener el elemento html más cercano a estas coordenadas?

O, alternativamente, ¿hay alguna forma de crear un selector (o usar alguna construcción jQuery) para enumerar elementos y luego buscar cuál se cierra a las coordenadas proporcionadas? Supongamos que el conjunto de elementos es pequeño y finito.

Answer 1

he construido un método jQuery que devuelve el elemento más cercano a compensar, dentro de la colección:

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

Notas:

1. Si el desplazamiento es dentro de uno de los elementos, se devolverá.
2. Estoy recorriendo cuatro desfases, porque esto proporciona la mejor precisión.

utilizar de esta manera:

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

Answer 2

Lo mejor que puedo hacer es tener un bucle de función de búsqueda que recorre todos los elementos existentes y compara las coordenadas, manteniendo una copia de la variable más cercana todo el tiempo.

Esa es la forma en que puedo pensar en hacer esto, y lo que haría si estuviera bajo sus limitaciones.

Answer 3

bucle a través de todos los elementos es bastante fácil:

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

o tratar de la función original de jQuery offsetparent(). De esta página viene el siguiente ejemplo:

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