JQuery: shuffling through a stack of images. Can go one way but can't go the other

Question

I have some simple code that loops through a series of images

<div class = "image">
   <% @image_array.each do |image| %>
    <%= image_tag image %>
   <% end %>
</div>
<div class="btn-group" role="group" aria-label="...">
   <button id = "Up" type="button" class="btn btn-default">UP</button>
   <button id = "Down" type="button" class="btn btn-default">DOWN</button>
</div>

The images are stacked on top of each other

.image {
    position:relative;
    }

.image img {
   position:absolute;
   top:0;
 }

And I have some jquery

    $('#Up').on('click', function(){
        $('.image :first-child').hide().next().show().end().appendTo('.image');
    });

When I press the Up button it goes to the next image - like shuffling through cards.I am struggling to see how I can do a reverse shuffle like this...

    $('#Down').on('click', function(){
        $('.image :first-child').hide().prev().show().end().appendTo('.image');
    });

I am new to jQuery but I thought I could just user prev(). It's not working.

Some guidance would be appreciated. Again, I am new to Jquery.

EDIT: This code, using the comments given gets very close:

When I press up, it shuffles one way, when I press down it shuffles the other way BUT if I now press UP without refreshing the page, nothing happens - its stuck.....

    $('#Up').on('click', function(){
        $('.image :first-child').hide().next().show().end().appendTo('.image');
    });

    $('#Down').on('click', function(){
        $('.image :last-child').hide().prev().show().end().prependTo('.image');
    });

Here is the rendered HTML - I have had to remove the src attributes (these are medical images). When I look at the HTML, as I click through, its moving up and down through the image tags but as I said, whats actually getting rendered is.....up (works) then if I press down (works) but then if I go to press up again its stuck - nothing happens unless I refresh.

<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
  <div class = "ImageMount">
     <div class = "image">
        <img src="" alt="" />
        <img src="" alt="" />
        <img src="" alt="" /> 
    </div>
  <div class="btn-group" role="group" aria-label="...">
    <button id = "Up" type="button" class="btn btn-default">UP</button>
    <button id = "Down" type="button" class="btn btn-default">DOWN</button>
  </div>
</div>

Here is a jsfiddle (if I have posted the wrong link please let me know...this was my first time using jsfiddle). The problem appears to be replicated in this.

https://jsfiddle.net/SimonWalsh/qywdxf9g/6/

Answer 1

One option is:

var img = $('.image').children(), len = img.length;

$('#Up, #Down').on('click', function() {
   var index = img.index( img.filter(':visible').hide() );
   var targetIndex = this.id === 'Up' ? ++index : --index;  

   // this ternary operator is necessary, otherwise the "up" button
   // shows nothing when the `targetIndex` is equal to 
   // the length of `img` collection, the `.eq()` and `.index()` are zero-based
   img.eq( targetIndex === len ? 0 : targetIndex ).show();
});

edit: The jQuery .index() method returns the index of the passed element in the collection. In the above code the .hide() method hides the element and returns the current collection. The returned collection should have only one element. The returned index is used for getting index of next or previous sibling based on the id of the clicked element. Please note that in this case – since the elements are siblings – you could also use the .index() method directly, i.e. img.filter(':visible').hide().index().