有效检测兄弟元素重叠的时间

本文介绍了有效检测兄弟元素重叠的时间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

示例:

<div id="big">&nbsp;</div> <div class="small">&nbsp;</div> <div class="small">&nbsp;</div> <div class="small">&nbsp;</div> <div class="small">&nbsp;</div> <div class="small">&nbsp;</div> <!-- ...and so on -->

#big"绝对位于".small"部分的后面，但是 不是父元素.

"#big" is positioned absolutely behind a portion of the ".small"s, but is not a parent element.

我一直在这样做:

var smallArray = []; var $big = $('#big'); var $bigPos = $big.offset(); $('div.small').each(function() { var $this = $(this); var $thisPos = $this.offset(); if( $thisPos.left >= $bigPos.left && $thisPos.left <= $bigPos.left+$big.outerWidth() && $thisPos.top >= $bigPos.top && $thisPos.top <= $bigPos.top+$big.outerHeight() ) smallArray.push($this); });

...但是这似乎很糊涂.我是否错过了jQuery的某些方法 或香草JavaScript，让我可以更优雅地完成此操作 &有效的方式?

...but this seems kludgy. Am I missing out on some methods of jQuery or vanilla JavaScript that will allow me to do this in a more elegant & efficient manner?

感谢您提供的任何帮助.

Thanks ahead for any help you can provide.

推荐答案

此公式将检测是否有任何指定的元素与目标元素重叠:

This formula will detect if any of the specified elements is overlapping a target element:

function findIntersectors(targetSelector, intersectorsSelector) { var intersectors = []; var $target = $(targetSelector); var tAxis = $target.offset(); var t_x = [tAxis.left, tAxis.left + $target.outerWidth()]; var t_y = [tAxis.top, tAxis.top + $target.outerHeight()]; $(intersectorsSelector).each(function() { var $this = $(this); var thisPos = $this.offset(); var i_x = [thisPos.left, thisPos.left + $this.outerWidth()] var i_y = [thisPos.top, thisPos.top + $this.outerHeight()]; if ( t_x[0] < i_x[1] && t_x[1] > i_x[0] && t_y[0] < i_y[1] && t_y[1] > i_y[0]) { intersectors.push($this); } }); return intersectors; }

这是一个POC.

此SO问题对于解决此问题非常有帮助.

This SO question was very helpful in solving this problem.