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?

why change the css? can't you use: "remove()" last image tag (assign to var) + "before()" img:first? — hovanessyan, Jul 28 '12 at 12:30
you can always use detach (instead of remove) and prepend... — AdityaParab, Jul 28 '12 at 12:40

score 24 · Accepted Answer · answered Jul 28 '12 at 12:27

24

curr.parent().prepend(curr);

or

curr.prependTo(curr.parent());

answered Jul 28 '12 at 12:27

adeneo

312,895
29
395
388

Don't we need to `.detach()` it? Or prepend will detach it implicitly? – AdityaParab Jul 28 '12 at 12:40
prepending an element that already exists in the DOM will just move it, so there's no need to detach() it first. – adeneo Jul 28 '12 at 12:45

score 6 · Answer 2 · answered Jul 28 '12 at 12:30

6

You can use prepend():

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

http://jsfiddle.net/Uttv8/

answered Jul 28 '12 at 12:30

Ram

143,282
16
168
197

score 6 · Answer 3 · answered Jul 28 '12 at 12:32

6

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

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

answered Jul 28 '12 at 12:32

Uttara

2,496
3
24
35

Move last child to first position

3 Answers3

Linked