Question

我正在试图找出一种方法来选择在绝对定位的div中重叠（并包含，完全覆盖）的元素。

我基本上需要选择某个像素边界内的元素。如何使用jQuery完成？

Answer 1

以下是基本想法：

var left = 100,
    top = 200,
    right = 300,
    bottom = 500;

$('#main-div').children().filter(){
    var $this = $(this),
        offset = $this.offset(),
        rightEdge = $this.width() + offset.left,
        bottomEdge = $this.height() + offset.top;

    if (offset.top > top && offset.left > left && right > rightEdge && bottom > bottomEdge) {
        return true;
    }

    return false;
});

将顶部的坐标更改为您需要的任何内容。

Answer 2

假设您的html类似于：

<div id="thediv"></div>
<div id="one">one</div><br />
<div id="two">two</div><br />
<div id="three">three</div><br />

你可以拥有这个jQuery：

$('div:not(#thediv)').filter(function() {
    var offset = $(this).offset();
    var left = offset.top;
    var top = offset.top;
    var right = left + $(this).width();
    var bottom = top + $(this).height();

    var offset2 = $('#thediv').offset();
    var left2 = offset2.top;
    var top2 = offset2.top;
    var right2 = left2 + $('#thediv').width();
    var bottom2 = top2 + $('#thediv').height();

    if (
        (
            (left < left2 && right > left2)
            || (left > left2 && right < right2)
            || (left < right2 && right > right2)
        )
        &&
        (
            (top < top2 && bottom > top2)
            || (top > top2 && bottom < bottom2)
            || (top < bottom2 && bottom > bottom2)
        )
        )
        return true;
    else
        return false;
}).css('background-color', 'red');

与主div重叠的div将变为红色。您可以对其进行测试here。

我们的想法是获取元素的offset()，width()和height()，看看它们是否重叠。代码可能不是很有效，我这样写就是为了说清楚。

如何选择边界内的元素？

2 个答案: