Usando JQuery para cambiar el orden de los elementos.

¿Alguien sabe lo que estoy haciendo mal? Estoy tratando de alterar el orden en el que aparecen algunas imágenes, quiero que las imágenes se desplacen hacia la derecha / izquierda un lugar cada vez que aprieto un botón. Esto es lo que he intentado pero sin suerte.

Cualquier ayuda o conocimiento será verdaderamente apreciado.

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

Asumiendo que quieres que esto funcione como un carrusel que gira (la última imagen se convierte en la primera cuando te mueves a la derecha), así es como lo haría:

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

Estás tratando de referirte a una variable dentro de una cadena. Eso no tiene sentido.
En realidad quiso decir:

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

Pero una implementación más eficiente es:

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

La implementación más eficiente sin efectos secundarios es:

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

Esta:

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

Debería ser esto:

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

No estoy seguro si otras cosas están mal sin embargo.