[jQuery] Efficiently Detect When Sibling Elements Overlap
Example:
<div id="big"> </div>
<div class="small"> </div>
<div class="small"> </div>
<div class="small"> </div>
<div class="small"> </div>
<div class="small"> </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.