jquery 获取子元素到祖先元素的距离 （设置定位）

这个方法主要用于获取某个元素的到祖先的距离，然后给旁边的元素设置定位

1.通过循环叠加高度来计算

实现需要用到两个api,position和offsetParent

1. position是找一个position:relative的父节点，然后返回一个相对左边和上边的距离。
2. offsetParent,offsetParent是找到这个元素相对的父节点.就是找一个position:relative的父节点，如果没有这样的父节点，那就是body。

var son = $('.son')
var father = $(".father")
//传进去的是jquery对象,返回距离对象

function getElementDistance(son,father){
    var distance= {
        left:0,
        top:0
    }
    distance.left = son.position().left;
    distance.top = son.position().top;
    var current = son.offsetParent();
    while (current.attr("class")!=father.attr("class")) {
        distance.left += current.position().left;
        distance.top += current.position().top;
        current = current.offsetParent();
    }
    return distance
}

需要注意的是jquery的position是相当于原生的offsetLeft和offsetTop的

2.通过相对窗口获得

获取相对窗口的距离来互相减 使用到offset,来获取到body的相对左边和右边的距离。

//直接得到距离
var sonOffset = $(".son").offset()
var grandOffset = $(".grand").offset()
var distance = {
  left:sonOffset.left-grandOffset.left,
  top:sonOffset.top-grandOffset.top
}

需要注意的是jquery的offset是相当于原生的clientLeft和clientTop的