Move div to top after click

$(document).ready(function() {
$('div.post').click(function() {
  // the clicked LI
  var clicked = $(this);

  // all the LIs above the clicked one
  var previousAll = clicked.prevAll();

  // only proceed if it's not already on top (no previous siblings)
  if(previousAll.length > 0) {
    // top LI
    var top = $(previousAll[previousAll.length - 1]);

    // immediately previous LI
    var previous = $(previousAll[0]);

    // how far up do we need to move the clicked LI?
    var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');

    // how far down do we need to move the previous siblings?开发者_如何转开发
    var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());

    // let's move stuff
    clicked.css('position', 'relative');
    previousAll.css('position', 'relative');
    clicked.animate({'top': -moveUp});
    previousAll.animate({'top': moveDown}, {complete: function() {
      // rearrange the DOM and restore positioning when we're done moving
      clicked.parent().prepend(clicked);
      clicked.css({'position': 'static', 'top': 0});
      previousAll.css({'position': 'static', 'top': 0}); 
    }});
  }
});

});

How can I move a div to the top of a list of divs upon clicking a link.

eg;

<div id=1>Div One <a>Click to update</a><a>a different link</a></div>
<div id=2>Div One <a>Click to update</a><a>a different link</a></div>
<div id=3>Div One <a>Click to update</a><a>a different link</a></div>
<div id=4>Div One <a>Click to update</a><a>a different link</a></div>
<div id=5>Div One <a>Click to update</a><a>a different link</a></div>

and when you click ONLY on the link "CLICK TO UPDATE" for any div, it should move that div to the top of the page!

80% done. Thanx guys for the swift response. Preciate it to the max. Anyways thanx to @valipour I managed to get the div to move ONLY when you click on a specific link by adding a class to the link and changing my first two lines from;

$('div.post').click(function() {
// the clicked LI
  var clicked = $(this);

to;

$("a.rep").click(function() {
    var clicked = $(this).closest("div.post");

html code is;

<div id="wrapper">
<div class="post"><a class="rep">1 Aasdjfa</a> <a>6 Aasdjfa</a></div>
<div class="post"><a class="rep">2 Aasdjfa</a> <a>7 Aasdjfa</a></div>
<div class="post"><a class="rep">3 Aasdjfa</a> <a>8 Aasdjfa</a></div>
<div class="post"><a class="rep">4 Aasdjfa</a> <a>9 Aasdjfa</a></div>
<div class="post"><a class="rep">5 Aasdjfa</a> <a>10 Aasdjfa</a></div>
</div>

Thanks!

BUT it doesn't work with div's that were dynamically loaded? eg. I have 10 divs showing by default then I have a script that loads more divs when you scroll...this script won't move the divs in the autoload section when you click on any of them...any idea why???

If you put them all inside another wrapper div you could do (This is now the most upto date version):

$("#wrapper a.rep").live('click', function(){
  $(this).parents('.post').hide().prependTo("#wrapper").slideDown();
});

EDITED my answer. This one works. With animation aswell ;).

If you dont like animation, have just $(this).parent().prependTo("#wrapper") **

http://jsfiddle.net/2DjXW/18/

To load Divs that are dynamically added afterwards, you will have to use the 'live'. When document is ready the divs that are not there cannot have events added. But live adds the events when new are dynamically added.

New edit: http://jsfiddle.net/tVhqz/8/

Should work now well.

give "update" class to those links that you want to do the action and then:

$("a.update").click(function()
{
    var myparent = $(this).closest("div");
    var parentparent = myparent.parent();
    myparent.detach().prependTo(parentparent );

    return false;
});

jsFiddle link: http://jsfiddle.net/g56ap/4/

NOTES:

1. we are keeping parentparent separately because myparent.parent() would be invalid after detach.

Ok so through a combination of @valipour and @pehmolenu scripts I was able to get what I was looking for. I have tested it only on chrome but am sure it should work on other browsers. The complete working code is below.

Javascript;

$("#wrapper a.rep").live('click', function(){
$(this).parents('.post').hide().prependTo("#wrapper").slideDown();
});

html;

<div id="wrapper">
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
</div>

This will also work if you divs are loaded dynamically based on scroll!

Thanx guys! See it in action at repjesus.com! click "rep it" on any item!