jQuery 问题：将 <li> 从一个 <ul> 移动到另一个的顶部答案

【问题标题】：jQuery problem: moving a <li> from one <ul> to the top of anotherjQuery 问题：将 <li> 从一个 <ul> 移动到另一个的顶部
【发布时间】：2010-03-10 18:24:16
【问题描述】：

我有两个 UL，一个在另一个之上：

<ul id="one">
  <li>
  <li>
<ul>
<div id="div_for_second_UL">
  <ul>
   <li>
  </ul>
</div>

首先，每个 LI 都有一个按钮，单击该按钮可移除 LI，并将下面的 LI 向上移动一个空格以填补空白。它工作正常。但我希望点击的 LI 同时被添加到下一个 UL 的顶部，使其成为底部列表中的第一项。现在，我正在尝试：

        li.fadeOut(500, function() {$(li).remove(); });
        li.insertBefore('#div_for_second_UL');

我也尝试过使用 prependTo 而不是 insertBefore。我已经尝试向第二个 UL 添加一个 id 并将其用作 insertBefore 中的参数。每个结果都是一样的：

-LI 消失并被相同的内容替换，但没有样式 - 新内容逐渐消失，大概是因为fadeOut效果还没有结束。

我哪里出错了？

谢谢...

【问题讨论】：

你没有正确关闭标签。

标签： jquery jquery-animate fadeout html-lists

【解决方案1】：

试试这个：

li.fadeOut(500, function() {
     li.prependTo('#div_for_second_UL ul').fadeIn(); 
});

http://jsfiddle.net/Nf84m/1/

【讨论】：

没有骰子。它会淡出，但不会前置。还尝试了 insertBefore ，结果相同。
现在试试吧，它正在做前置，但由于淡出它被隐藏了。将其淡入将解决您的问题。

【解决方案2】：

是的。因为您没有克隆动画完成时将其删除的元素。您应该在动画回调中执行 prepend 以保持该操作同步。

试试这个：

li.fadeOut(500, function() {li.prependTo('#div_for_second_ul ul');});

【讨论】：