Эффективно обнаружьте, когда одноуровневые элементы наложатся

Пример:

<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" s, но не является родительским элементом.

Я делал это:

           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, который позволит мне делать это более изящным и эффективным способом?

Спасибо вперед за любую справку можно обеспечить.