Home/ Questions/Q 6142239
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T18:21:36+00:00

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

  • 0
$(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???

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0