如何在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 个元素。

现在假设第一个元素具有“选定”类。如何将“选定”类添加到该元素下方的元素（如果 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/

Answer 2

试试next() 和addClass()。

$('#container div.selected').next().addClass('selected');

但是，如果您有多个选定的 div，那么您需要使用循环来获取每个选定的和 addClass。

$('#container div.selected').each(function(){
   var $nextDiv=$(this).next();
   if(!$nextDiv.hasClass('selected'))
   {
        $nextDiv.addClass('selected');
    }
});

Answer 3

代码如下：

var diff = window.resolution - (#container div).width()*(#container div).length)

现在计算“差异”是否是 (#container div).width() 的倍数。

如果是两个，那么它将是第 5 项...添加此处选择的类。

如果是一个，那么它将是第 6 项...添加此处选择的类。