jquery - 找到某个元素覆盖的每个 DOM 元素？

Question

我在页面上有一个具有非常高 z-index 的特定 DOM 元素，我需要找到它重叠的每个元素(即，在相同点上具有较低 z-index 的每个元素)

我该如何实现？

Answer 1

要获取具有较低 z-index 的所有元素，您可以使用过滤器并根据 z-index 过滤元素。

获取位置与某个元素重叠的所有元素有点棘手。
需要获取重叠元素的 Angular 的位置，然后将其与每个元素的 Angular 进行比较，看看它们是否在某处重叠。

总的来说，是这样的

var reference = $('#overlay'),
    index     = reference.css('z-index'),
    square    = getDimensions(reference);

function getDimensions(elem) {
    var offset = elem.offset();
    return [offset.top, offset.top + elem.height(), offset.left, offset.left + elem.width()];
}

$('body *').not('script, style, :hidden').filter(function() {
    // only elements with lower z-index or without z-index
    var idx = $(this).css('z-index');
    return isNaN(idx) || (idx < index);
}).filter(function() {
    // only elements that intersect with the overlaying element
    var offset = getDimensions($(this));
    return ((offset[1] > square[0]) && (offset[0] < square[1])) &&
           ((offset[3] > square[2]) && (offset[2] < square[3]));
});

FIDDLE