Move last child to first position

Question

My HTML:

  <div id="my-slider">
    <img src="/slider/pic/bf3.jpg" alt="picture">
    <img src="/slider/pic/bf3_cq.jpg" alt="picture">
    <!-- etc -->
  </div>

On specific event I want to move last img tag to first position (according to parent)

I try:

    curr.css('left', 0);
    curr.prepend(curr.parent()); 

I can change css, but second line raising error:

HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy

Could someone give me any advice?

Answer 1

curr.parent().prepend(curr);

or

curr.prependTo(curr.parent()); 

Answer 2

You can use prepend():

$('#my-slider').prepend($('#my-slider img:last'))

http://jsfiddle.net/Uttv8/

Answer 3

try out this http://jsfiddle.net/uttara/TFYXA/

$("#my-slider img:last-child").prependTo("#my-slider")