javascript - 从父级中删除一个子级并将其作为兄弟级添加到父级

Question

我有一个子弹区域

• 你好
• 如何
• 是
• 你

不，我在选择

是

并更改为数字子弹。所以我的清单应该改变

• 你好
• 如何

1. 是

• 你

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

我怎样才能做到这一点。

Answer 1

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

1. 列表项上的项目符号由其列表决定；ul用于无序列表（即磁盘项目符号），并且ol用于有序列表（即编号项目符号）。
2. li如果没有它的父母是ulor ，你就不能拥有 a ol。
3. 你不能让 aul成为 a 的直接孩子，ol反之亦然（他们可以是 an 的孩子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();
        }
    }
});

我正在使用列表项上的单击事件来切换列表项。这是一个 jsFiddle 链接，供您使用实现并验证一切是否按预期工作：http: //jsfiddle.net/8Z9rf/

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