10/10 Grey Selected Section Scrolls down to Infinity


#1

Hi There!

So, the course tells me I successfully completed all the requirements. It looks like I have the right code. There is just one pet peeve I have with this. The grey selected article keeps on scrolling down to infinity. Eventually, the grey selected boxes goes out of view, instead of reappearing at the top. Does anyone know code to make the grey selected portion cycle through all the articles and reappear at the top again?

Thanks!

Here is my code:

var main = function() {
    // select the icon article:
    $('.article').click(function(event) {
      // select all other articles to remove the grey:
      $('.article').removeClass('current');
      // hide the article description
      $('.description').hide();
      // select the current article and shade it grey
      $(this).addClass('current');
      // show the article description
      $(this).children('.description').show();
    });
    
    // create a keypress event handler to open and close lines when the user presses o and n keys
    $(document).keypress(function(event) {
        // if the key 'o' is pressed:
        if (event.which === 111) {
            // toggle the article's description on:
            $('.current').children('.description').toggle();
        }

        // if the n key is pressed:
        else if (event.which === 110) {
            // the highlighted box moves to the next article.
            // save the current highlighted text in the variable called currentArticle
            var currentArticle = $('.current')
            // save the next selection in the variable nextArticle
            var nextArticle = currentArticle.next();
            // remove the currently selected article
            currentArticle.removeClass('current');
            // save the next article as the next article.
            nextArticle.addClass('current');
        }
    });
};

$(document).ready(main);

#2

@shogunryudan13,

    // if the n key is pressed:
    else if (event.which === 110) {
        // the highlighted box moves to the next article.
        // save the current highlighted text in the variable called currentArticle
        var currentArticle = $('.current')
        // save the next selection in the variable nextArticle
        var nextArticle = currentArticle.next();
        //
        // if jQuery-Selection is EMPTY 
        if ( nextArticle.length === 0 ) {
             nextArticle = $(".article").first()
        }
        //
        // remove the currently selected article
        currentArticle.removeClass('current');
        // save the next article as the next article.
        nextArticle.addClass('current');
    }