jQuery | 获取在指定区域内的 div 元素

Question

有没有一种简单的方法让 div 元素完全适应定义区域的大小？

例如：

<div id="redbox"> RESIZE DIV </div>

<div id="grid">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
</div>

我拥有4个盒子（灰色），我能够调整一个

元素（红色，置于所有盒子的顶部）。调整大小后，我想知道哪些

元素完全适合这个区域。

是否有人知道如何做到这一点？ 在JQUERY中是否有相应的方法或函数？

- frgtv10

---

感谢您有耐心地添加了意义深远的图形，我会为此投上一票。 :) - Cranio

Answer 1

看起来 withinBox 插件可以帮助你解决这个问题 (jquery.fn.withinBox)。你可以像这样使用该代码：

var area = $('#redbox'),
    offset = area.offset(),
    selected = $('#grid div').withinBox(offset.left,
                                        offset.top,
                                        area.width(),
                                        area.height()
                                        );

- lonesomeday

---

对我来说，这似乎是我需要的。我必须想办法弄清楚！ - frgtv10

Answer 2

我会使用 JQuery 循环遍历所有元素，获取它们的 .offset() 值以及宽度和高度。然后，对于每个元素，我将获取这四个值：

X1 (offset().top)
Y1 (offset().left)
X2 (= X1 + width)
Y2 (= Y1 + height)

我将使用这些值来检查以下四个点（仍然是每个要检查的元素）。

x1,y1  x1,y2  x2,y2  x2,y1  (the four corners)

假设我们使用相同的方法对“覆盖”DIV进行操作（获取其四个角xd1，yd1，xd2，yd2），我会这样推断：

如果其中一个或多个点位于我的“覆盖”DIV中，则认为该DIV已“被覆盖”。

编辑：我不知道是否有此插件，但我猜它的内部机制与我的类似，但我敢打赌它比我的解决方案更简单 :)

- Cranio

---

是的，这正是“withinBox”插件所做的。解释得很清楚！ - lonesomeday

谢谢您的帮助。如果我不能使用现有的插件“withinBox”，这就是我如何计算它！ - frgtv10

Answer 3

我认为目前还没有完全解决方案。根据情况可能不同。

但您可以使用 document.elementFromPoint 函数来实现。

知道可调整大小的 div 的绝对位置后，您可以创建坐标图，然后查看在该 div 下面的元素。

- antyrat