How to ScrollTo next & next & next....... element

Question

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

jQuery with ScrollTo Plugin (http://demos.flesler.com/jquery/scrollTo/)

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

Demo : http://jsfiddle.net/UaGjs/8/

It doesnt work :( It work only 1st time

Answer 1

Working on Tomalak's answer you need to update the reference obj points to to the next element

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

I've updated it with Prev but it can be improved to remove the duplication

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

I've noticed there is an occompanying plugin called Serial Scroll

Final edit

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

Answer 2

Because you always re-obtain a handle to the DOM elements with $('.post'), rather than re-using the object and calling .next() on it iteratively.

Try the following. It's untested and rough/ready, but should demonstrate how you can get around the scoping issue.

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