jQuery：具有包装器的next（）和prev（）？

Question

I have the following html:

<article class="layer" id="one"> </article>
<article class="layer" id="two"> </article>
<article class="layer" id="three"> </article>

<section class="cat" id="something">    
    <article class="layer" id="four"> </article>
    <article class="layer" id="five"> </article>
</section>

<article class="layer" id="six"> </article>
…

I want to navigate with my keyboard through all articles. Like so …

var view,
        next,
        prev;

    $(document).keydown(function(e) {

        view = $('.layer:in-viewport');
        next = view.next().attr('id');
        prev = view.prev().attr('id');

        switch (e.keyCode) {
            case 38: // Up
                if ( prev != undefined )
                    scroll($("#"+prev), true, 0);
                break;
            case 40: // Down
                if ( next != undefined )
                    scroll($("#"+next), true, 0);
                break;
        }

    });

This would work fine if all articles would be in the same container. However as you can see above I have a also sections that wrap those articles. I simply want to make it work as if there were no such sections and article#three jumps straight to article#four

Any idea how I could make that work?

edit:

The thing causing the bug in Firefox …

if ( top.location.hash ) {
        hash = top.location.hash.substring(3);
        catHash = hash.split('/')[1];

        if ( catHash !== undefined )
            scroll($("#"+catHash), false, 0);
        else
            scroll($("#"+hash), false, 0);

        if ( hash != "index" && !isiPhone() )
            $('#top').slideDown();  
    }

Where only those 4 lines cause the bug …

if ( catHash !== undefined )
    scroll($("#"+catHash), false, 0);
else
    scroll($("#"+hash), false, 0);

This few lines only check on page-load if a hash is existing in the current top.location. So if the url is looking like this www.something.com/#!/category/idOfElement I want to jump to that location on the page.

Why could those 4 lines cause this bug only in firefox?

Answer 1

The easiest way to select the "real" next <article> elements is by using the .index and .eq methods.

var allArticles = $("article.layer");
var index = allArticles.index(view);   // Zero-based indexes. Not found = -1
var prev = index <= 0 ? $() : allArticles.eq(index-1);
var next = allArticles.eq(index + 1); 

Answer 2

Get a collection of all the articles, then on keypress find out which article is the current one and calculate next/prev based on their relative position(index) from the current article. You'll need to be careful in handling the first/last article.

var $articles = $('.article');

$(document).keydown(function(e) {

    var view = $('.layer:in-viewport'),
        idx = $articles.index(view),
        prev = $articles.eq(Math.max(0,idx-1)),
        next = $articles.eq(Math.min(idx+1,$articles.length-1));

    switch (e.keyCode) {
        case 38: // Up
            if ( prev != undefined )
                scroll($("#"+prev), true, 0);
            break;
        case 40: // Down
            if ( next != undefined )
                scroll($("#"+next), true, 0);
            break;
    }

});

You could also implement wrapping at the ends if you wanted.