如何在div下可视地检索元素

Question

我正在尝试检索放置在jQuery或javascript中的绝对定位div下的图像数组。一种选择。我尝试过“.getElementsByPoint”，但由于它只允许x，y，我有点困惑，我将如何处理高度和宽度，并获得该区域的所有内容。

希望有人有一些建议，让我摆脱困境。

我画了一幅快速图片来说明我的意思。

Answer 1

我已经在纯JS中回答了非jQuery环境中的答案，但是当然使用jQuery可以替换选择器，并且可以用.each()替换for循环。另外如果div是一个jQuery draggable或类似的东西，getSelected函数可以成为被移动的div的回调。

这是jsFiddle： https://jsfiddle.net/r11h1tjq/2/

如果您调整div的绝对位置并运行，您将只看到与div相交的图像被选中＆＃34;。

HTML

<div id="select"></div>
<img src="http://placehold.it/200x200" class="intersect" alt="" />
<img src="http://placehold.it/200x200" class="intersect" alt="" />
<img src="http://placehold.it/200x200" class="intersect" alt="" />
<img src="http://placehold.it/200x200" class="intersect" alt="" />

CSS

#select {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 175px;
  right: 0;
  border: 3px dashed #000000;
}

.selected {
  border:1px solid #ff0000;
}

img {
  border: 0;
}

JAVASCRIPT

function getSelected() {
  var inBox = []
  var divBox = document.getElementById("select").getBoundingClientRect()
  var images = document.getElementsByClassName("intersect")
  for (var i = 0; i < images.length; i++) {
    var imageBox = images[i].getBoundingClientRect()
    var overlap = !(divBox.right < imageBox.left ||
      divBox.left > imageBox.right ||
      divBox.bottom < imageBox.top ||
      divBox.top > imageBox.bottom)
    if (overlap) {
      inBox.push(images[i])
    }
  }
  return inBox
}


var selected = getSelected()
for (var j = 0; j < selected.length; j++) {
  selected[j].className += " selected";
}