点击后将div移到顶部答案

【问题标题】：Move div to top after click点击后将div移到顶部
【发布时间】：2011-07-20 06:03:18
【问题描述】：

$(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% 已完成。感谢伙计们的迅速反应。将其发挥到最大。无论如何感谢@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...知道为什么吗？

【问题讨论】：

你能发布你的 javascript 还是更好，在jsfiddle.net 做一个新的小提琴并将你的代码放在那里？
jsfiddle.net/vHCQY 目前发生的情况是，当我点击另一个链接“不同的链接”时，它仍然会移动 div，这不是我想要的！
好的！感谢@pehmolelu 的提示，我可以通过将这一行 $("a.rep").click(function() 更改为 $("a.rep").live('click',函数（），它的工作就像一个魅力！谢谢，我希望这可以帮助任何正在寻找将 div 移动到页面顶部的方法的人！！！大涨！你们太棒了！！！

标签： javascript jquery ajax html scroll

【解决方案1】：

如果你把它们都放在另一个包装器 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/

现在应该可以正常工作了。

【讨论】：

这很棒，它工作正常，但是当你有多个 div 时，它不会选择整个 div，而是只选择内容！！！检查它jsfiddle.net/tVhqz/3
yoooo.....你是maaaan！ :) 大起大落！！！所以我可以使用这个简短的脚本，它会做和那个 loooong 一样的 :) 太棒了！！！
哎呀...thanx @Herbert 我不知道我应该这样做！

【解决方案2】：

为您想要执行操作的链接提供“更新”类，然后：

$("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/

注意事项：

我们将 parentparent 分开保存，因为 myparent.parent() 在分离后将无效。

【讨论】：

嗨工作正常但是当我点击另一个链接时......它仍然会移动列表！我只想让它在你点击特定链接时移动，即“点击更新”！！
那么您可以为该链接指定一个特定的类并使用 a.update 而不是 a。查看我的更新。

【解决方案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 是基于滚动动态加载的，这也将起作用！

谢谢各位！在 repjesus.com 上查看它的实际效果！在任何项目上点击“rep it”！

【讨论】：