Hello,
I have 6 buttons, one for each operation. I am able to hide all images, show all images, display even images, and display odd images.

I am failing to move the first image to last and the last image to first.

Please assist.

JavaScript:

$(function(){
$("#HIDE").click(function (){$("img").hide();});
$("#SHOW").click(function (){$("img").show();});
$("#EVEN").click(function (){$("img: odd").hide();
$("img:even").show();});
$("#ODD").click(function (){$("img:even").hide();
$("img: odd").show();});



$("#FIRST_is_NOW_last").click(function
(){$("img:first").parent().append($("img:last"));});
$("#LAST_is_NOW_first").click(function
(){$("img:last").parent().prepend($("img:first"));});
});

My HTML:

.
.
.
.
.
<div id="myMaterial">
<img src="pic1.jpg" alt="pic1" id="pic1" title="pic1" />
<img src="pic2.jpg" alt="pic2" id="pic2" title="pic2" />
<img src="pic3.jpg" alt="pic3" id="pic3" title="pic3" />
<img src="pic4.jpg" alt="pic4" id="pic4" title="pic4" />


</div>
<div id="output"></div>
</body>

</html>