如何根据位置选择元素？

Question

如何根据元素的位置选择元素？

<div id="parent">
    <p id="text">This is a text</p>
</div>

//CSS

#parent{width:100px;height:100px;position:absolute;left:100px;top:100px;}

现在我使用 left=100px，top=100px，如何使用 JQuery 选择 div 元素？

- Manish Basdeo

---

我不是jQuery高手，但我记得一些关于自定义选择器的内容...这可能是实现它的一种方式。 - Miguel Angelo

你是否正在尝试根据元素的上部和左侧值来查找元素？换句话说，你想要查找所有顶部为100、左侧为100的div元素吗？ - Emil

Answer 1

类似这样的东西可能会起作用：

var el = document.elementFromPoint(100, 100);
var $el = $(el); // if you really want to use jQuery.

关于document.elementFromPoint的文档。

这可能不是你想要的：它只会获取该点上可见的、最顶层的元素，并且它会获取占据该空间的任何元素，而不仅仅是其左上角在该点的元素。但是，很有可能会对你有所帮助 :）。

所有主流浏览器都支持它，尽管在 Safari 4 或 Opera 10.10 中可能会得到奇怪的结果。

- Domenic

---

它是否具有跨浏览器兼容性？ - AjayR

Answer 2

你可以循环遍历每个元素来检查位置。这里是一个快速的示例函数：

function getElementsByPosition(x,y) {
  var elements=new Array();
  $('*').each(function() {
    if($(this).css('top')==x && $(this.css('left'))==y) {
      elements[elements.length]=this;
    }
  });
  return elements;
}

更新：Domenic的解决方案更加优雅。在使用我的之前，请考虑使用他的。

- Kranu

---

谢谢夸奖 : )。它们虽然有不同的功能……但这取决于 OP 正在寻找什么。 - Domenic

Answer 3

jQuery的css()函数允许您检索CSS属性的值，例如css('left')将返回元素的左侧位置。

然而，在您的问题中，您询问如何基于其位置选择div元素。我想您是指类似于$('left=100px')的东西。这是不可能的。jQuery使用CSS选择器查询结构，而不是DOM的样式。

- ColinE