Переместить 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 при нажатии на ссылку.

например;

<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 в разделе автозагрузки, когда вы нажимаете на любой из них ... есть идеи почему ???

Answer 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, которых нет, не могут быть добавлены события. Но в режиме реального времени добавляются события, когда динамически добавляются новые.

Новое редактирование: http://jsfiddle.net/tVhqz/8/

Должно работать хорошо.

Answer 2

Хорошо, благодаря комбинации сценариев @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! нажмите «Повторить» на любом предмете!

Answer 3

назначьте класс "update" тем ссылкам, для которых вы хотите выполнить действие, а затем:

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

ПРИМЕЧАНИЯ:

1. мы держим parentparent отдельно, потому что myparent.parent () будет недействительным после отсоединения.