如何滚动到下一个 & 下一个 & 下一个....... 元素答案

【问题标题】：How to ScrollTo next & next & next....... element如何滚动到下一个 & 下一个 & 下一个....... 元素
【发布时间】：2011-08-18 12:05:41
【问题描述】：

    <div class="wrap">
        <div class="layer">
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
        </div>
    </div>
<span class="next" style="cursor:pointer;"> (next div) </span>

带有 ScrollTo 插件的 jQuery (http://demos.flesler.com/jquery/scrollTo/)

$('.next').click(function() {
    $(".wrap").scrollTo( $('.post').next(), 800, {margin:true} );
});

演示：http://jsfiddle.net/UaGjs/8/

它不起作用:( 它只工作第一次

【问题讨论】：

因为您总是使用$('.post') 重新获取DOM 元素的句柄，而不是重复使用该对象并在其上反复调用.next()。
我该如何解决？请

标签： jquery scrollto next

【解决方案1】：

我在使用 next() 时运气不佳。我所做的是将同一类的所有元素加载到一个数组中：

 myArray = $('.post');

然后初始化一个索引：

 index = 1;

然后遍历数组：

$('.next').click(function() {
 $(".wrap").scrollTo( myArray[index], 800, {margin:true} );
 index++;
});

希望对您有所帮助！

【讨论】：

【解决方案2】：

因为您总是使用 $('.post') 重新获取 DOM 元素的句柄，而不是重复使用该对象并在其上反复调用 .next()。

试试下面的。它未经测试且粗略/准备就绪，但应该展示如何解决范围界定问题。

【讨论】：

添加这个 $(function() { var $obj = $('post'); $('.next').click(function() { $('.wrap').scrollTo ($obj.next(), 800, { margin:true }); }); });

【解决方案3】：

处理 Tomalak 的答案，您需要更新指向下一个元素的引用 obj

http://jsfiddle.net/UaGjs/7/

var next;
$('.next').click(function() {
   if ( next === undefined ) {
     next = $('.post').next();
   } else {
      next = next.next();   
   }
   $(".wrap").scrollTo(next , 800, {margin:true} );
});

我已经用 Prev 更新了它，但可以改进它以删除重复

http://jsfiddle.net/UaGjs/10/

我注意到有一个附带的插件叫做Serial Scroll

最终编辑

http://jsfiddle.net/nickywaites/UaGjs/13/

【讨论】：

好吧 Prev 需要成为 next 的前一个而不是起点......所以你需要检查 next 是否也未定义。我想我们可以稍微整理一下。
我的意思是有很多重复的代码。不幸的是午休时间到了 :) 我已经更新了我的答案来告诉你我的意思。
还有一件事......当 :first-child 或 :last-child 是 left0 或 right0 时，有什么方法可以隐藏 ARROW 吗？
是的，我认为这是 css 的大小问题。我不确定如何解决这个问题。也许玩弄宽度。
@l2aelba 我确信这是可能的，但我目前没有太多时间提供帮助。

【解决方案4】：

因为您总是使用 $('.post') 重新获取 DOM 元素的句柄，而不是重复使用该对象并在其上反复调用 .next()。

试试下面的。它未经测试且粗略/准备就绪，但应该展示如何解决范围界定问题。

$(function() {
    var $obj = $('post');
    $('.next').click(function() {
        $('.wrap').scrollTo($obj.next(), 800, { margin:true });
    });
});

【讨论】：

@l2aelba：这是一个起点。需要付出一些努力才能将其塑造成适合您的完整解决方案。