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列表的顶部。

例如

<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移动到页面顶部！

80％完成了。 Thanx家伙迅速回应。最大限度地预测它无论如何，对于@valipour而言，当我通过在链接中添加一个类并更改前两行来点击特定链接时，我设法让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当你点击其中任何一个...任何想法为什么???

Answer 1

给予＆＃34;更新＆＃34;对您要执行操作的那些链接进行分类：

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

    return false;
});

jsFiddle链接：http://jsfiddle.net/g56ap/4/

注意：

我们分开保留父母，因为分离后myparent.parent（）会无效。

Answer 2

如果你将它们全部放在另一个包装div中，你可以做到（这是现在最新的版本）：

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

编辑我的回答。这个有效。随着动画以及;）。

如果你不喜欢动画，只需要$（this）.parent（）。prependTo（“＃wrapper”）**

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

要加载之后动态添加的Div，您必须使用“live”。当文档准备就绪时，不存在的div不能添加事件。但是，当动态添加新事件时，live会添加事件。

新修改 http://jsfiddle.net/tVhqz/8/

现在应该工作得很好。

Answer 3

好的，通过@valipour和@pehmolenu脚本的组合，我能够得到我想要的东西。我只在chrome上测试过它，但我相信它应该适用于其他浏览器。完整的工作代码如下。

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

如果基于滚动动态加载div，这也会有效！

Thanx伙计们！在repjesus.com上看到它！点击任何项目的“rep it”！

单击后将div移至顶部

3 个答案: