0

次のようにコード化されたリストがあるとしましょう。

    <ul id="Folder" name="Folder">
    <li value="0">Top Folder</li>
    <li value="11">2nd Folder 01</li>
    <li value="17" class="third">---3rd Folder 01-01</li>
    <li value="18" class="third">---3rd Folder 01-02</li>
    <li value="383" class="fouth">------4th Folder 01-02-01</li>
    <li value="384" class="fifth">---------5th Folder 01-02-01-01</li>
    <li value="385" class="fifth">---------5th Folder 01-02-01-02</li>
    <li value="386" class="fifth">---------5th Folder 01-02-01-03</li>
    <li value="387" class="fifth">---------5th Folder 01-02-01-04</li>
    <li value="388" class="fifth">---------5th Folder 01-02-01-05</li>
    <li value="19" class="third">---3rd Folder 03</li>
    <li value="20" class="third">---3rd Folder 04</li>
    <li value="22" class="third">---3rd Folder 05</li>
    <li value="130" class="fouth">------5th Folder 01-02-05-01</li>
    <li value="131" class="fouth">------5th Folder 01-02-05-02</li>
    <li value="132" class="fouth">------5th Folder 01-02-05-03</li>
    <li value="133" class="fouth">------5th Folder 01-02-05-04</li>
    <li value="134" class="fouth">------5th Folder 01-02-05-05</li>
    <li value="398" class="fouth">------5th Folder 01-02-05-06</li>
    <li value="158">2nd Folder 02</li>
    <li value="257" class="third">---3rd Folder 02-01</li>
    <li value="258" class="third">---3rd Folder 02-02</li>
    <li value="259" class="third">---3rd Folder 02-03</li>
    <li value="16">2nd Folder 03</li>
    <li value="382" class="third">---3rd Folder 03-01</li>
    <li value="51" class="third">---3rd Folder 03-02</li>
    <li value="113" class="fouth">------4th Folder 03-02-01</li>
    <li value="125" class="fouth">------4th Folder 03-02-02</li>
    </ul>

そして私はjqueryを使用しました：

    $('li.fifth').wrapAll('<ul>');
    $('li.fouth').wrapAll('<ul>');
    $('li.third').wrapAll('<ul>');

したがって、5番目、4番目、および3番目のすべてのliをグループにグループ化できます。

私が今抱えている問題は、5番目のulグループを4番目のliの親に移動するにはどうすればよいかということです。そして4番目のulグループを3番目のliなどに...

4

1 に答える 1

2

使い方が見当たりませんでした.wrapAll。

代わりに、prev + nextセレクターを使用しました。

以下のコードは、 の<li class="fifth">直後にある最初のものを取得し<li class="fouth">ます。次に、前の要素である<li class="fouth">. 次に、 を作成し、そこに要素を<ul>移動し始めます。最後に、 をの最後<li class="fifth">に置きます。<ul><li class="fouth">

注:<ul>は DOM の外部で構築され、DOM に挿入されます。<ul>そうすれば、aが an の兄弟であるなどの無効な状態に DOM が陥ることはありません<li>。

何度も呼び出すことができる関数にコードを入れました。

function moveToParent(parentClass, childClass) {
    $('li.' + parentClass + ' + li.' + childClass).each(function(e) {
        var $parentFolder = $(this).prev();
        var $ul = $('<ul/>');
        while ($parentFolder.next().is('li.' + childClass)) {
            $parentFolder.next().appendTo($ul);
        }
        $parentFolder.append($ul);
    });
}

moveToParent('fouth', 'fifth');
moveToParent('third', 'fouth');

jsfiddle でのライブ デモ

注: 「fourth」のスペルを「fouth」のままにしました。これは、html にあるためです。

于 2013-02-28T02:54:54.113 に答える