Question

看一下这段代码：jsfiddle

使用箭头键循环显示div列表。正如你所看到的，“马克”之后和“卢卡”之间存在差距。换一种说法;在某些时候，非div的蓝色背景。我的问题：如何在没有差距的情况下循环使用div？

（首先关注输入）

Answer 1

我可能会使用modulo operator（%）找到一个解决方案，当选择索引小于或大于元素数时，将选择索引重置为0：

var curr = $('#display').find('.current');    
    ind = curr.index(),
    all = curr.parent().children(),
    adj = e.keyCode == 40 ? 1 : -1;

if (!curr.length)
    all = $("#display").children(), ind = e.keyCode == 40 ? -1 : 0;

$(curr).attr('class', 'display_box');    
all.eq((ind + adj) % all.length).attr('class', 'display_box current');

示例：http://jsfiddle.net/sjKgF/50/

（编辑：固定边缘情况，由于鼠标悬停重置，最初没有项目突出显示）（编辑2：重构。你可以看到使用模数允许我们摆脱一些if语句并缩短代码。）

Answer 2

当你在最后一个（下降）时问题是if(curr.length)将是真的，因此curr.next()不存在（当下降时）。当你在第一个元素上升时也是如此。所以你想把你的if语句改成这样的

if (e.keyCode == 40) 
    {    
        $(curr).attr('class', 'display_box');        
        if(curr.length && $(curr).next().length > 0)
        {
            $(curr).next().attr('class', 'display_box current');
        }
        else{
            $('#display div:first-child').attr('class', 'display_box current');
    }

Answer 3

只需稍微修改原始代码：http://jsfiddle.net/Wf2mR/

Answer 4

您需要检查边缘情况

   $('#search').keyup(
    function (e){
        var curr = $('#display').find('.current');
        if (e.keyCode == 40) 
        {                                      
            if(curr.length && $(curr).next().length > 0)
            {
                    $(curr).removeClass('current');
                    $(curr).next().addClass('current');
            }
            else{
                $('#display div:first-child').addClass('current');
            }                    
        }
        if(e.keyCode==38)
        {                                        
            if(curr.length && $(curr).prev().length > 0)
            {                            
                    $(curr).removeClass('current');
                    $(curr).prev().addClass('current');
            }
            else{
                $('#display div:last-child').addClass('current');
            }            
        }
    }        
    )

骑自行车穿过一个div

4 个答案: