クリック後に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 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> 

、あなたがリンクをクリックしてくださいONLYすべてのdivのために、「更新します」、それは、ページの最上部にそのdiv要素を移動する必要があります！

---

80％完了。迅速な応答のために高尚な人。それを最大にする。とにかく@valipourには余裕がありました。リンクにクラスを追加し、最初の2行を変更して特定のリンクをクリックしたときだけ、divを移動させることができました。

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

to;

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

あなたは を行うことができ、他のラッパーのdiv（これは今ではほとんど点で最大の日付のバージョンである）の内部でそれらすべてを置く場合：

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

私の答えを編集しました。これは動作します。アニメもあります）。あなたがアニメーションのようにいけない場合

は、ちょうど$（この）.parent（）を持っている。prependToを動的に後から追加されたdivをロードするには（ "＃ラッパー"）**

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

、あなたの意志「生きている」を使わなければなりません。文書が準備できたら、そこにないdivはイベントを追加できません。しかし、liveは、newが動的に追加されたときにイベントを追加します。

新編集： http://jsfiddle.net/tVhqz/8/

はうまく動作するはずです。

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

NOTES：

1. 我々は別途parentparentを維持していますデタッチ後にmyparent.parent（）が無効になるためです。

Answer 3

@valipourと@pehmolenuスクリプトを組み合わせることで、私が探していたものを手に入れることができました。私はそれをクロームでのみテストしましたが、他のブラウザでも動作するはずです。完全な作業コードは以下の通りです。

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"をクリック！