は、効率的に検出した場合兄弟要素重複

Question

例：

<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のいくつかの方法を逃していますか？私はこれをより洗練された形で行うことができます &効率的な方法ですか？

お寄せいただきありがとうございます。

Answer 1

指定された要素のいずれかがターゲット要素を重複している場合、この式は、検出します：

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

Here is a POC.

This SO questionは、この問題を解決する上で非常に有用でした。