单击后将div移到顶部 [英] 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}); 
    }});
  }
});

});

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

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

例如；

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

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％完成.谢谢你们的迅速反应.最大限度地发挥它的作用.无论如何，将thanx更改为@valipour时，我都设法通过在链接中添加一个类并从中更改前两行来使div仅在单击特定链接时移动；

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

至;

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

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

推荐答案

如果将它们全部放入另一个包装div中，则可以(这是最新的版本):

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

编辑了我的答案.这个作品.以及动画；).

如果您不喜欢动画，只需$(this).parent().prependTo(#wrapper")**

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

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

要加载之后动态添加的Div，您将必须使用"live".准备好文档后，不存在的div不能添加事件.但是，当动态添加新事件时，实时添加事件.

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.

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

现在应该可以正常工作.

Should work now well.

这篇关于单击后将div移到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！