Эффективное обнаружение перекрытия одноуровневых элементов

Пример:

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

Я делал это:

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

Заранее спасибо за любую помощь, которую вы можете предоставить.


jquery siblings
person Karthik    schedule 13.10.2009    source источник
comment
Что вы пытаетесь достичь?   -  person Jan Willem B    schedule 13.10.2009
comment
Ваша формула будет определять только то, находится ли верхняя левая точка маленького элемента внутри большого элемента. Что произойдет, если нижняя правая точка маленького окажется внутри большого? Они перекрываются, но ваша формула этого не обнаружит.   -  person cmcculloh    schedule 05.02.2010

Ответы (1)


arrow_upward
21
arrow_downward

Эта формула определит, перекрывается ли какой-либо из указанных элементов с целевым элементом:

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

Вот POC.

Этот вопрос SO очень помог в решении этой проблемы.

person cmcculloh    schedule 05.02.2010
comment
Мне также нужно было обнаружить перекрывающиеся элементы в jQuery, и я использовал плагин jquery-overlaps, но он иногда приводил к сбою IE. Эта функция была отличной заменой. Спасибо! - person shipshape; 17.03.2010
comment
Привет @shipshape Если jQuery Overlaps приводит к сбою IE, почему ты не сообщил об этом на github? Поможет многим другим пользователям... - person bart; 10.09.2011