1

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

4

3 回答 3

1

尝试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');
    }
});
于 2013-05-07T07:04:18.333 回答
1

代码将如下所示：

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

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

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

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

于 2013-05-07T07:11:39.690 回答
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/

于 2013-05-07T08:03:36.420 回答