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

代码如下：

var diff = window.resolution - （#container div）.width（）*（＃container div）.length）

现在计算“diff”是多少（#container div）.width（）。

如果它是2那么它将是第5项......在此处选择添加课程。

如果它是1那么它将是第6个项目...在此处选择添加课程。

Answer 2

这可以使用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 3

尝试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');
    }
});

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

3 个答案:

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