Efficiently Detect When Sibling Elements Overlap

Example:

<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" is positioned absolutely behind a portion of the ".small"s, but is not a parent element.

I have been doing this:

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

...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.

13.10.2009 15:20:47
what are you trying to accomplish?
Jan Willem B 13.10.2009 19:23:53
Your formula will only detect if the top left point of a small element is inside of the big element. What happens if the bottom right point of the small is inside the big? They are overlapping, but your formula will not detect it.
cmcculloh 5.02.2010 19:16:42
1 ОТВЕТ

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

Here is a POC.

This SO question was very helpful in solving this problem.

21
23.05.2017 12:16:59
I also needed to detect overlapping elements in jQuery, and had been using the "jquery-overlaps" plugin, but it sometimes crashes IE. This function was a great replacement. Thanks!
shipshape 16.03.2010 21:36:04
Hey @shipshape If jQuery Overlaps crashes IE, why didn't you report that on github? Would help a lot of other users...
bart 10.09.2011 01:22:30