Using JQuery to change order of elements

Question

Does anybody know what I'm doing wrong? I'm trying to alter the order on which some images show, I want the images to shift to the right/left one spot every time I hit a button. This is what I've tried but no luck.

Any help or insight will be truly appreciated

$("#rightShift").click(function(){
    $("img").hide();
    var count = $("img").size();
    $("img").each(function(i) { 
        var indexImg = count - i;
        $("img:eq(indexImg)").show();
    });
}); 
$("#leftShift").click(function(){
    $("img").hide();
    $("img:last").prependTo("img");
    $("img").show();
});

Answer 1

Assuming you want this to work like a carousel that goes around (the last image become the first one when you are shifting right), then this is how I would do it:

$("#rightShift").click(function(){
    $("img:last").detach().insertBefore("img:first");
});

$("#leftShift").click(function(){
    $("img:first").detach().insertAfter("img:last");
});