Take the 2-minute tour ×

here is my web page : please check

I have placed two links in the page, clicking on the first link alerts the text in each div and its element position (index). clicking on the second link change the position of the last div to the position of the second div and vice versa. now the last div on the second position but its index doesn't change.(again click on the first link) The third element is in the second position and its index is still 3, it shouldn't be 2 ? or how can I update the element index as it moves from one position to another ? Please help

Thank you very much

share|improve this question
how do you want to change the positions? at start 1,2,3, after first clicking - 1,3,2, what after it? maybe you want to replace them again? ie, get 1,2,3 again? –  Syom Jul 27 '10 at 12:20
The problem you're having is that you only move the elements (change their position), but their place in the DOM (document object model) doesn't change. In other words, the browser doesn't really know the order changed, only that he has to display them the other way round. –  MvanGeest Jul 27 '10 at 12:21
yes MvanGeest you are correct,now I got my mistake –  milan Jul 27 '10 at 14:11

1 Answer 1

up vote 1 down vote accepted

As MvanGeest commented: When you click you see this:

1 -> 1
2 -> 3
3 -> 2

But what the browser does is this:

1 -> 1
2 -> 2{top = top - 35}
3 -> 3{top = top + 35}

So the order is still 1,2,3 ... ok EDIT what you want to do is add something like this to your move function:

$('#main #3').insertAfter($('#main #1'));

this will move the 3rd element after the 1st so the browser sees it like you do.

share|improve this answer
Thank you very much, your suggestion is great :) :) and its working now –  milan Jul 27 '10 at 14:12

Your Answer


