jQuery：next（）和prev（）与包装？ [英] jQuery: next() and prev() with a wrapper?

问题描述

我有以下html：

 < article class =layerid =one> < /冠词GT; 
< article class =layerid =two> < /冠词GT; 
< article class =layerid =three> < /冠词GT; 
 
< section class =catid =something> 
< article class =layerid =four> < /冠词GT; 
< article class =layerid =five> < /冠词GT; 
< / section> 
 
< article class =layerid =six> < /冠词GT; 
 ... 
  

我想用我的键盘浏览所有文章。像这样......

  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如果（prev！= undefined）
 scroll（$（＃+ prev），true，0）; 
 break; 
 case 40： /下
 if（next！= undefined）
 scroll（$（＃+ next），true，0）; 
 break; 
} 
 
}）; 
  

如果所有的文章都在同一个容器中，这可以正常工作。不过，正如你上面看到的，我也有一些部分包装这些文章。我只是想让它工作，就好像没有这样的部分，并且文章＃3 直接跳转到文章＃4

任何想法如何让这项工作成功？

编辑：

导致Firefox中的错误的东西...

  if（top.location .hash）{
 hash = top.location.hash.substring（3）; 
 catHash = hash.split（'/'）[1]; 
 $ b $ if（catHash！== undefined）
 scroll（$（＃+ catHash），false，0）; 
 else 
 scroll（$（＃+ hash），false，0）; 
 
 if（hash！=index&&！isiPhone（））
 $（'＃top'）。slideDown（）; 
} 
  

只有这四行会导致错误......

  if（catHash！== undefined）
 scroll（$（＃+ catHash），false，0）; 
 else 
 scroll（$（＃+ hash），false，0）; 
  

如果在当前top.location中存在一个散列值，这几行仅检查加载页面。
所以如果url看起来像这样 www.something.com /＃！/ category / idOfElement 我想跳转到页面上的那个位置。

为什么这4行只能在firefox中导致这个错误？

选择真正的下一个< article> 元素的最简单方法是使用 .index 和 .eq 方法。

  var allArticles = $（ article.layer）; 
 var index = allArticles.index（view）; //基于零的索引。未找到= -1 
 var prev = index <= 0？ $（）：allArticles.eq（index-1）; 
 var next = allArticles.eq（index + 1）; 
  

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?

解决方案

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); 

这篇关于jQuery：next（）和prev（）与包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！