Question

一直在寻找高低，似乎无法找到答案。我有一个充满小方块div的页面，我试图想出一个方法来检查并查看div是否落在页面上的两个其他div之间。例如：

两个div正常：

[A] --------- [B]

页面更改并加载第三个div：

[A] --- [C] --- [B]

假设div是10px高，那么确定C在A和B之间的任何点落下的最简单方法是什么？

希望我解释得很好，谢谢你的手!!

编辑以添加更多细节，不要以为我解释得很好。我正在寻找使用页面上的“物理”位置来查找中间div是否介于A和B之间。

假设div的顶部/左侧偏移为0,10且div B为0,100。每个div高10px，所以我试图找出最简单的方法来确定div C落在它们之间，如果它的顶部/左边是9,50。希望有点清楚。

Answer 1

假设这个HTML：

<body>
  <div class="someClass"></div>
  <div class="someOtherClass"></div>
  <div class="aClass"></div>
  <div class="alsoaClass"></div>
</body>

现在，jQuery的index将告诉你DIV的位置：

$('.someClass').index(); // 0
$('.someOtherClass').index(); // 1
$('.aClass').index(); // 2
$('.alsoaClass').index(); // 3

像这样，你总是可以比较他们在DOM中的位置。

如果您要做的是获取相对于窗口的位置（而不是根据他们的DOM位置），那么您应该检查他们的offset：

$('.someClass').offset().top; // will give you amount of pixels from the top of the document

Answer 2

假设div共享一个共同的父级并以DOM顺序显示：

.index（）属性可能就在您之后

文档：http://api.jquery.com/index/

示例：http://jsfiddle.net/Y7aWM/4/

function between(before, current, after)
{
    var $current = $(current);
    var $before = $current.parent().children(before);
    var $after = $current.parent().children(after);

    var before_index = $before.index();
    var current_index = $current.index();
    var after_index = $after.index();

    return (before_index < current_index && current_index  < after_index );
}

Answer 3

我无法保证可靠性，但DOM clientTop属性可能会引起一些兴趣。

https://developer.mozilla.org/en/DOM/element.clientTop

Answer 4

function checkPosition(divID)
{

  if($('#'+divID).next().attr('nodeName') == 'DIV' && $('#'+divID).prev().attr('nodeName')=='DIV')
    alert('its between two divs');
}

我希望这会有所帮助

确定div是否出现在两个单独的div之间

4 个答案: