1

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

<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来玩。

4

1 回答 1

2

发生的事情是task4- 包括它的<ul>元素与一个类task_group_list- 被移动到task3. 然后，当轮到task5被移动时，有多个元素匹配这个选择器：

li#task_333 .task_group_list

如附加文档中所述：

该.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));
    }  
})

更新了 jsFiddle

于 2013-10-14T09:44:51.317 回答