从父删除一个孩子，并将其作为同级添加到父

Question

我有一个子弹地区像

• 你好
• 怎么样
• 你

不，我选择

是

和改变编号子弹。 所以我的名单应该像

• 你好
• 改变

1. 怎么样

• 你

1. 要结束第二个孩子后，光盘子弹。
2. 想要添加第三个孩子作为兄弟姐妹给父母。
3. 想要再次将光盘子弹制作为第四个孩子并将其作为兄弟添加到父级。

我该怎么做。

Answer 1

这实际上是一个非平凡且非常有趣的问题。但是，您需要先了解几件事情：

1. 列表项目上的项目符号由其列表确定; ul用于无序列表（即磁盘项目符号），而ol用于有序列表（即编号项目符号）。
2. 如果父母不是ul或ol，就不能有li。
3. 你不能有一个ul是ol反之亦然直接孩子（他们可以是li不过的孩子，但他们会子列表）

这意味着，每次切换列表中，您需要确保您正在切换的项目具有正确（和相反）类型的父项，并且它之前和之后的项目也位于正确类型的（单独）列表中。在很多情况下，您需要创建这些列表（或者在它们变空时删除它们）。

反正话是不值钱的，这里的代码（我使用jQuery，但这个想法应该是一样的，不管你用什么）：

$('li').on('click', function() { 
    var $listItem = $(this); 
    var $list  = $(this).parent(); 
    var $items = $list.children(); 
    var itemIndex = $items.index($listItem); 
    var numItems = $items.length; 

    var curType = $list.is('ul') ? 'ul' : 'ol'; 
    var newType = curType === 'ul' ? 'ol' : 'ul'; 

    var $prev = $list.prev(); 
    var $next = $list.next(); 

    if (itemIndex === 0) { 
     // The item we're switching is the first Item in the list 
     if (!$prev.is(newType)) { 
      $prev = $('<' + newType + '/>'); 
      $prev.insertBefore($list); 
     } 
     $prev.append($listItem); 
    } else if (itemIndex === numItems - 1) { 
     // The item we're switching is the last Item in the list 
     if (!$next.is(newType)) { 
      $next = $('<' + newType + '/>'); 
      $next.insertAfter($list); 
     } 
     $next.prepend($listItem); 
    } else { 
     // The item is in the middle, we need to split the current list into 3. 
     $tailList = $('<' + curType + '/>'); 
     $tailList.append($listItem.nextAll()); 
     $tailList.insertAfter($list); 

     $middleList = $('<' + newType + '/>'); 
     $middleList.append($listItem); 
     $middleList.insertAfter($list); 
    } 

    if (numItems === 1) { 
     // list used to have only one Item, so it's now empty, and should be removed. 
     $list.remove(); 

     if ($prev.is(newType) && $next.is(newType)) { 
      // The two surrounding lists are of the same type and should be merged. 
      $prev.append($next.children()); 
      $next.remove(); 
     } 
    } 
}); 

我使用一个click事件列表项来切换列表项。这里有一个jsFiddle链接，可供玩家执行并验证一切正常，如预期的那样：http://jsfiddle.net/8Z9rf/

该代码绝对可以针对速度/性能进行优化，但我的目标是简单明了，希望我能设法做到这一点。