如何在jquery中选择所选元素（网格样式）下面的元素（div）

选择当前选定元素下方的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

我在这里找到了一个展示这个概念的小说明：

尝试下一步并添加类

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

但是，如果您有多个选定的div，则需要使用loop来获取每个选定的和addClass

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

代码如下所示：

var diff=窗口分辨率-容器分区宽度*容器分区长度

现在，如果diff是容器div.width数量的倍数，则进行计数

如果它是两个，那么它将是第五个项目…在这里选择添加类

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

这可以使用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';
}

---

完整演示：所以在较小的屏幕上，您希望选择2个div并选择类？您希望为一行中的每个第一个div添加所选类？？？？dfsq，否。所选类将被删除。很抱歉给你带来了困惑。rynhe，我想从第一个跳到第五个因为是海底你想使用箭头向下/向上键吗？是的，通过不同的分区…哼。。下一步将选择下一个DOM元素，该元素将位于右侧。在第四次之后，它将下降到第五次。按下向下箭头时，我想直接从第一个元素转到第五个元素。只有在有两行的情况下，如果所有元素都适合一行，那么它将不起任何作用。。。因为它不存在…-我不确定我是否能理解hahaThank you Rajiv007，我本来打算这样做的，但我想也许有更简单的方法，但你证实了我没有其他方法投票赞成。我很快就会接受这个答案。为了好玩，我测试了用当前均衡器减去每行均衡器来计算选定块上的块。但你的方法更简单。谢谢你的帮助+我同意你的回答。