jQuery |获取定义区域中的 div 元素答案

【问题标题】：Jquery | Get div elements in defined areajQuery |获取定义区域中的 div 元素
【发布时间】：2012-06-27 22:02:03
【问题描述】：

有没有一种简单的方法可以让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 个盒子（灰色），我可以调整 div（所有盒子顶部的红色）的大小。调整大小后，我想知道哪些 div 元素完全适合该区域。

有人知道怎么做吗？ JQUERY中有方法或函数吗？

【问题讨论】：

为有耐心附上有意义的图形而点赞。 :)

标签： javascript jquery jquery-selectors

【解决方案1】：

在我看来，withinBox 插件可能会帮助您解决这个问题 (jquery.fn.withinBox)。你可以使用这样的代码：

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

【讨论】：

在我看来，这就是我所需要的。我必须弄清楚！

【解决方案2】：

我对 JQuery 所做的是遍历所有要检查的元素，获取它们的 .offset() 值，加上 width 和 height。

然后对于每个元素，我会得到这四个值：

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“被覆盖”。

编辑：我不知道有一个插件，我猜它的内部机制和我的一样，但我敢打赌这是一个比我的更简单的解决方案:)

【讨论】：

是的，这正是withinBox 插件所做的。 +1 解释它！
感谢您的帮助。如果我不能使用现有的插件withinBox，这就是我要计算的方法！

【解决方案3】：

我认为目前还没有完整的解决方案。据认为这可能是多种多样的。

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

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

【讨论】：