Question

我正在尝试将列表项从一个无序列表移动到另一个列表。更新发生时调用update.js.erb（我可以看到它在日志中被调用而没有错误）。

我对jQuery很新，所以我为自己的无知道歉。

<% if @task.complete? %>
  $('#task_<%= @task.id%> li').detach().appendTo($('#complete_tasks ul'));
  $.('#complete_tasks').sortable_list();
<% else %>
  $('#task_<%= @task.id %> li').detach().appendTo($('#incomplete_tasks ul'));
  $.('#incomplete_tasks').sortable_list();
<% end %>

我在How to move an item from one list to another?

中看到了.detach（）

我尝试了很多不同的形式，但我的猜测是我选择列表或列表项错误。

非常感谢任何/所有反馈！：）

更新1：

ul id="complete_tasks" data-update-url="http://localhost:3000/tasks/sort_incomplete" class="ui-sortable"
  li class="task" id="task_1"
  ...

类似于incomplete_tasks

ul id="incomplete_tasks" data-update-url="http://localhost:3000/tasks/sort_complete" class="ui-sortable"
  li class="task" id="task_7"
  ...

更新2：以下是最终正常工作的内容，之后我进行了不同的函数调用，当我最初测试它时产生了问题。

<% if @task.complete? %>
  $('#complete_tasks').append($('#task_<%= @task.id %>'));
<% else %>
  $('#incomplete_tasks').append($('#task_<%= @task.id %>'));
<% end %>

如果没有额外的$（...），该函数只会打印#task_2，所以我添加了这个并删除了错误的函数调用，一切都运行良好！

Answer 1

这应该足够了

$('#task_<%= @task.id%> li').appendTo('#complete_tasks ul');

但这会将#task_下的所有列表项移至complete_tasks内的ul

Answer 2

您不需要分离。如果你使用appendTo（或追加），那么它会移动元素。它不会创建副本。另外，摆脱$()中的appendTo - 您只需要#ID。而且您只需要ID来选择元素 - 不需要标记名称和类。

将列表项从一个无序列表移动到另一个列表

2 个答案: