1つのノードが他のノードと重複しているかどうかを確認する

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()：offset();で

http://api.jquery.com/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()で十分ではないと思います。あなたが2つの姉妹要素を比較している場合を除きます。より一般的には、

• 使用parents()両方のノード
• 上
• 同じで

（代わりに、あなたもindex()を行うことができ、最高異なる祖先にindex()を比較しながら、両方の祖先リストから要素をオフにポップ$('*')にありますが、それはひどく非効率であると思います）

EDIT：clarificatイオンは@マイクの答えの下で、これは正式に衝突検出の質問です。したがって、私はthisのようなものが順番にあると思いますが、コメントに注意してください。代わりに、jQuery offset() functionを使用して要素の位置を取得することができます。比較ロジックは健全です。