Использование JQuery для изменения порядка элементов

Question

Кто-нибудь знает, что я делаю неправильно? Я пытаюсь изменить порядок отображения некоторых изображений, я хочу, чтобы изображения менялись вправо/влево на одно место каждый раз, когда я нажимал кнопку. Это то, что я пробовал, но не повезло.

Любая помощь или понимание будет по-настоящему оценили

$("#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

Предполагая, что вы хотите, чтобы это работало как карусель, которая идет вокруг (последнее изображение станет первым, когда вы смещаются вправо), то это, как я хотел бы сделать это:

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

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

Answer 2

Вы пытаетесь ссылаться на переменную внутри строки. Это бессмысленно.
Вы на самом деле имел в виду:

$("img:eq(" + indexImg + ")").show(); 

Но более эффективная реализация:

$(this).prev().show(); 

Наиболее эффективная реализация без побочных эффектов:

$("#rightShift").click(function(){ 
    var $images = $("img"); // <-- Reference to all images 
    $images.hide(); 
    //var count = $images.length; //<-- Unused variable, delete it? 
    $images.each(function(i) { 
     $(this).prev().show(); 
    }); 
}); 
$("#leftShift").click(function() { 
    var $images = $("img"); 
    $images.hide(); 
    $images.last().prependTo("img"); // OR: $images.before($images.last()); 
    $images.show(); 
}); 

Answer 3

Это:

$("img:eq(indexImg)").show(); 

Должно быть так:

$("img:eq(" + indexImg + ")").show(); 

Не уверен, что, если другие вещи неправильно, хотя.