[jQuery] Efficiently Detect When Sibling Elements Overlap

[BrianMB]

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.