Detectar com eficiência quando os elementos irmãos se sobrepõem
Exemplo:
<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" está posicionado absolutamente atrás de uma parte dos ".small" s, mas não é um elemento pai.
Eu tenho feito isso:
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);
});
... mas isso parece confuso. Estou perdendo alguns métodos de jQuery ou JavaScript de baunilha que me permitirão fazer isso de uma maneira mais elegante e eficiente?
Agradecemos antecipadamente por qualquer ajuda que você possa fornecer.