Question

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

我如何做到这一点？

Answer 1

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

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

所有这些，像这样

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

查找某个元素所涵盖的每个DOM元素？

1 个答案: