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 中。这样，DOM 永远不会处于无效状态，其中 a<ul>是 an 的兄弟姐妹<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 回答