hiệu quả Detect Khi anh chị em ruột Elements chồng chéo

Question

Ví dụ:

<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" được bố trí hoàn toàn đằng sau một phần của ".small" s, nhưng không phải là một yếu tố phụ huynh.

Tôi đã làm điều này:

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

... nhưng điều này dường như kludgy. Tôi có bỏ lỡ một số phương pháp của jQuery hoặc vani JavaScript mà sẽ cho phép tôi thực hiện điều này một cách hiệu quả hơn & một cách hiệu quả?

Cảm ơn bạn vì đã trợ giúp bạn có thể cung cấp.

Answer 1

Công thức này sẽ phát hiện nếu một trong các yếu tố quy định là chồng chéo một yếu tố mục tiêu:

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 là rất hữu ích trong việc giải quyết vấn đề này.