jquery - 如何在jquery中选择所选元素(网格样式)下方的元素(div)

Question

选择当前所选元素下方的 div。

嗨!

好的，假设我们有以下 HTML 代码:

<div id="container">
   <div class="an-element selected"></div>
   <div class="another-one"></div>
   <div class="annnddd-onehere"></div>
   <div class="i-think"></div>
   <div class="you-got"></div>
   <div class="the-idea"></div>
</div>

每个div的宽度是固定的，但窗口大小不是固定的。在大屏幕上，所有 6 个元素都显示在同一行。但在较小的屏幕上，第一行包含 4 个元素，第二行包含 2 个元素。

现在假设第一个元素具有“selected”类。如何将“选定”类添加到该类下面的元素(如果 div 确实存在)？ (显然，当前的.selected将被删除)

这适用于使用箭头的键盘导航系统。

一如既往地感谢您的宝贵时间；)

编辑

如果选择了第二个元素，并且用户按下向下箭头，则第六个元素将受到影响。 如果选择了第三个元素，并且用户按向下箭头，则不会发生任何事情，因为该元素下没有 div。

我在这里发现了一些显示“概念”的动画: http://push-a-button.com/products/emucenter/

Answer 1

这可以使用 elementFromPoint 方法来完成。这个想法是测试当前选定的元素位于哪个元素下:

// testPos is the position under/over the selected element
var under = document.elementFromPoint(testPos.left, testPos.top);

// If the element has class block then we can highlight it
if (under && under.className == 'block') {
    selected[0].className = 'block';
    under.className = 'block selected';
}

完整演示:http://jsfiddle.net/PMeNJ/1/