Question

在jQuery中，是否可以知道节点是否与另一个节点重叠？

Answer 1

那么，你想检测重叠吗？然后这个：

var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && 
               comparePositions( pos1[1], pos2[1] );
    };
})();

用法：

if ( overlaps( node1, node2 ) ) {
    // ...
}

现场演示： http://jsfiddle.net/98sAG/

Answer 2

使用.offset()在屏幕上找到它的位置：

http://api.jquery.com/offset/

使用offset();，您将能够获得名为top的Y坐标，该坐标将是窗口顶部的像素位置。

var boxOne = $('#boxOne').offset():
var boxTwo = $('#boxTwo').offset():

if(boxOne.top>boxTwo.top) {
    alert('boxOne is higher');
} else if (boxOne.top==boxTwo.top) {
    alert('boxes are even');
} else {
    alert('boxTwo is higher');
}

Answer 3

jQuery中有一个函数.index（）可以满足您的需求。以下是该页面的链接：

http://api.jquery.com/index/

如果您对该功能有任何具体问题，请随时询问。

Answer 4

对于DOM中的位置，我认为index()就不够了，除非你要比较两个姐妹元素。更一般地说，

在两个节点上使用parents()
在相同的
比较最高不同祖先的index()

（或者，您也可以在index()上$('*')，但我想这会非常低效）

编辑：根据@ Mike的回答澄清，现在这正是一个碰撞检测问题。因此，我认为像this这样的东西是有序的，但请注意评论。您可以使用jQuery offset() function来获取元素的位置。比较逻辑是合理的。

确定一个节点是否与另一个节点重叠

4 个答案: