Javascript 查找位置上与另一个最近的div

您好，我如何找到上面图片上用其他颜色（带问号）突出显示的线条长度？矩形只是带有绝对位置的div

---

我的目标是找到与绿色div最接近的div，但是“最近的”是一个非常抽象的定义，所以我决定“最近的”应该是上图中突出显示的线条最短的div。也许还有其他更简单的方法来查找“最近的”div？？？

不久前有一个与此相关的问题启发我开始编写jQuery插件来实现这一点。您在问题中没有提到jQuery，但它肯定会使这项任务更容易

这是一个（突出显示了最接近红色的

div

）。您可以这样调用插件：

$("#myDiv").physicallyClosest("div").css("background-color", "#00ff00");

查找物理上最接近

#myDiv

的

div

，并更改其背景颜色

我相信它还远远不够完美，但如果您能够使用jQuery，它应该足以让您开始学习。

纯JS。基本上只是获取偏移量，并进行标准距离检查

//setup for the example
var divs = document.getElementsByTagName('div');

// Randomly place some divs around the screen.
for(var i = 0; i < divs.length; i++){
     divs[i].style.top = Math.random()*500 + 'px';
     divs[i].style.left = Math.random()*600 + 'px';    
     divs[i].onclick = getClosest;
}

// Actual function to get the closest
function getClosest(e){
    var x = this.offsetLeft,
        y = this.offsetTop,
        minDist = 99999,
        closestElement = {};

    for(var i = 0; i < divs.length; i++){
        if(divs[i] !== this){
           var x2 = divs[i].offsetLeft,
               y2 = divs[i].offsetTop;

           dist = Math.sqrt((x2 - x) *(x2-x) + (y2 - y) * (y2-y));

           if(dist < minDist){
               minDist = dist;
               closestElement = divs[i];
            }
        }
    }

    // Set the background of the closest element to red.
    closestElement.style.background = 'red';
}

---

刚刚编写了一个函数，它接受2个参数（元素和div数组，我们应该在第一个参数中查找与元素最近的div），并返回最近的元素

函数getClosest（元素，divs）{ //返回对象相对于整个文档的x，y坐标 函数getWindowPosition（obj）{ var box=obj.getBoundingClientRect（）； 返回{ x:box.left， y:机顶盒 } } var elementLeft=getWindowPosition（元素）.x； var elementRight=elementLeft+element.offsetWidth； var elementTop=getWindowPosition（element）.y； var elementBottom=elementTop+element.offsetHeight； var smallestDistance=null； var closestElement=null； 对于（变量i=0；ielementRight）{ xPosition=divLeft-elementRight； } var-yPosition=0； //查找div在y轴上的位置 if（divBottomelementBottom）{ yPosition=divTop-elementBottom； } var valueForComparison=0； 如果（X位置>Y位置）{ 用于比较的值=X位置； }否则{ 比较值=位置； } //比较div if（smallestDistance==null）{ 最小距离=用于比较的值； closestElement=divs[i]； }else if（比较值<最小距离）{ 最小距离=用于比较的值； closestElement=divs[i]； } } closestElement.style.background='red'；//对于演示，删除此行 回程闭合； }

---

它不能正常工作->我点击了测试1，测试3失败了red@AlaskaKid它有一个错误，我错误地比较了所有的x和没有y。它现在应该可以正常工作了。您的函数工作得很好，但在测试中点击了一些bug5@AlaskaKid是的，它的上/左比较，

test1

必须更接近，但要让它工作，它使用了一个简单的有文档记录的距离函数。

x = offsetLeft + width/2;
y = offsetTop + height/2;

function getClosest(element, divs) {

// Returns x, y coords of object relatively to the whole document
function getWindowPosition(obj) {
  var box = obj.getBoundingClientRect();
  return {
    x : box.left,
    y : box.top
  }
}

var elementLeft = getWindowPosition(element).x;
var elementRight = elementLeft + element.offsetWidth;
var elementTop = getWindowPosition(element).y;
var elementBottom = elementTop + element.offsetHeight;

var smallestDistance = null;
var closestElement = null;
for(var i = 0; i < divs.length; i++) {
    divs[i].style.background = 'yellow'; //For demo, delete this line
    var divLeft = getWindowPosition(divs[i]).x;
    var divRight = divLeft + divs[i].offsetWidth;
    var divTop = getWindowPosition(divs[i]).y;
    var divBottom = divTop + divs[i].offsetHeight;

    var xPosition = 0;
    //Finding div's postion on x axis
    if(divRight < elementLeft) {
        xPosition = elementLeft - divRight;
    } else if(divLeft > elementRight) {
        xPosition = divLeft - elementRight;
    }

    var yPosition = 0;
    //Finding div's postion on y axis
    if(divBottom < elementTop) {
        yPosition = elementTop - divBottom;
    } else if(divTop > elementBottom) {
        yPosition = divTop - elementBottom;
    }

    var valueForComparison = 0;
    if(xPosition > yPosition) {
        valueForComparison = xPosition;
    } else {
        valueForComparison = yPosition;
    }

    //Comparing divs
    if(smallestDistance === null) {
        smallestDistance = valueForComparison;
        closestElement = divs[i];
    } else if(valueForComparison < smallestDistance) {
        smallestDistance = valueForComparison;
        closestElement = divs[i];
    }
}

closestElement.style.background = 'red'; //For demo, delete this line
return closestElement;
}