1

次のような弾丸領域があります

  • こんにちは
  • どのように
  • それは
  • あなた

いいえ、私は選択しています

  • それは
    • Number Bullet に変更します。だから私のリストは次のように変わるはずです

    • こんにちは
    • どのように
    1. それは
    • あなた

    1. 2 番目の子の後にディスクの弾丸を終了したい。
    2. 3 番目の子を親に兄弟として追加します。
    3. 4 番目の子に Disc bullet を再度作成し、親に兄弟として追加したい。

    これどうやってするの。

    4

    1 に答える 1

    0

    これは実際には自明ではなく、非常に興味深い問題です。ただし、最初にいくつかのことを知っておく必要があります。

    1. リスト アイテムの箇条書きは、そのリストによって決まります。ulは順序なしリスト (つまり円盤の箇条書き)ol用で、順序付きリスト (つまり番号付きの箇条書き) 用です。
    2. li親が または のいずれかでなけれulば、 を持つことはできませんol。
    3. ulaを a の直接の子にしolたり、その逆にすることはできません(liただし、それらは an の子にすることはできますが、サブリストになります)。

    これは、リストを切り替えるたびに、切り替える項目に正しい (反対の) タイプの親があり、その前後の項目が (別の) リストにあることを確認する必要があることを意味します。正しいタイプ。多くの場合、これらのリストを作成する (またはリストが空になったら削除する) 必要があります。

    とにかく、言葉は無意味です。コードは次のとおりです (私は 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/

    コードは間違いなく速度/パフォーマンスのために最適化できますが、私は単純さと明快さを目指していました.これを達成できたことを願っています.

    于 2013-03-05T21:17:41.830 に答える