单击链接后，如何将div移动到div列表的顶部？

Question

$(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}); 
    }});
  }
});

});

单击链接后，如何将div移动到div列表的顶部？

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>

当单击任何div的“单击更新”链接时，它应该将该div移动到页面的顶部！

---

我还设法使div只在单击特定链接时才移动，方法是向链接中添加一个类，并将前两行从这个：

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

更改为：

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

html代码：

<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>

谢谢！但还有个问题是，它为什么不适用于动态加载的div？例如默认情况下，我有10个div显示，然后我有一个脚本，当滚动时会加载更多的div。当单击任何一个div时，这个脚本不会在autooload部分移动div——知道为什么吗？

Answer 1

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.