元素在循环中重复

Question

此代码在其他元素中移动元素以创建树层次结构。

<ul>
    <li id="task_111" class="task"><a>task1</a></li>
    <li id="task_222" data-in-task-group-id="333" class="task"><a>task3</a></li>
    <li id="task_333" class="task task_group">
      <a>task2</a>
      <ul data-task-group-id="333" class="task_group_list"></ul>
    </li>
    <li id="task_444" data-in-task-group-id="333" class="task task_group">
        <a>task4</a>
        <ul data-task-group-id="444" class="task_group_list"></ul>
    </li>
    <li id="task_555" data-in-task-group-id="333" class="task"><a>task5</a></li>
</ul>

移动元素的循环：

$('li').each(function() {
  task_group_id = $(this).attr('data-in-task-group-id');
  if (task_group_id) {
    $("li#task_" + task_group_id + " .task_group_list").append($(this));
  }  
})

所有看起来都很简单，但错误地复制了一个元素（task5）：

如您所见，task5位于两个父元素内：正确的父元素是task2，task4应该为空。

为什么task5在task4中被复制错误？

JSfiddle来玩。

Answer 1

task4 - 包括<ul>类的task_group_list元素 - 被移至task3会发生什么。然后，当要移动task5时，有多个元素与此选择器匹配：

li#task_333 .task_group_list

如doc for append中所述：

  

.append()方法将指定的内容作为 jQuery集合中每个元素的最后一个子项

由于您有多个元素，因此每个元素都附加task5，并根据需要克隆元素。

您需要更改您的选择器，使其仅匹配<ul>元素的直接子项而不是后代的<li>：

li#task_333 > .task_group_list

循环的代码将变为：

$('li').each(function() {
    task_group_id = $(this).attr('data-in-task-group-id');
    if (task_group_id) {
        $("li#task_" + task_group_id + " > .task_group_list").append($(this));
    }  
})

Updated jsFiddle