jquery – 当兄弟元素重叠时有效检测

例：

<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”的一部分后面,但是
不是父元素.

我一直这样做：

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,这将允许我更优雅地做到这一点
&安培;有效的方式？

在此先感谢您提供的任何帮助.

解决方法

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

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;
}

Here is a POC.

This SO question对解决这个问题很有帮助.

原文地址：https://www.jb51.cc/jquery/178008.html