Блог

Главная - Вопросы по программированию - циклическое прохождение через div

циклическое прохождение через div

#javascript #jquery

#javascript #jquery

Вопрос:

Взгляните на этот код: jsfiddle

Используйте клавиши со стрелками для циклического просмотра списка div. Как вы можете видеть, после «Mark» и выше «Luca» есть пробел. Другими словами; в какой-то момент ни у одного из divs нет синего фона. Мой вопрос: Как я могу циклически использовать divs без разрыва?

(Сначала сфокусируйте ввод)

Комментарии:

1. Я не вижу никакого пробела в FF4, похоже, он работает нормально.

2. О, вы имеете в виду после того, как вы закончите с самого низа, прежде чем вы вернетесь назад?

3. Да, именно это я и имею в виду. Это противоречит моему сценарию.

4. Большое вам всем спасибо. Я собираюсь обратиться к решению Амадана из-за «небольшой модификации». Мне нравятся простые вещи:) Но я думаю, что все ответы хороши.

Ответ №1:

Я бы, вероятно, выбрал решение с использованием оператора по модулю ( % ), чтобы сбросить индекс выбора в 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: переработана. Вы можете видеть, что работа с modulus позволяет нам избавиться от нескольких операторов if и сократить код).

Ответ №2:

С незначительной модификацией вашего исходного кода: http://jsfiddle.net/Wf2mR

Ответ №3:

Вам нужно будет проверить наличие крайних случаев 

    $('#search').keyup(
    function (e){
        var curr = $('#display').find('.current');
        if (e.keyCode == 40) 
        {                                      
            if(curr.length amp;amp; $(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 amp;amp; $(curr).prev().length > 0)
            {                            
                    $(curr).removeClass('current');
                    $(curr).prev().addClass('current');
            }
            else{
                $('#display div:last-child').addClass('current');
            }            
        }
    }        
    )

Ответ №4:

Проблема в том, что if(curr.length) будет true, когда вы перейдете к последнему (спускающемуся), таким образом, curr.next() не существует (при спуске). То же самое верно, когда вы переходите к первому элементу, идущему вверх. итак, вы хотите изменить свои операторы if, чтобы они были такими

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