根据破折号'-'将 li 分组为 ul

Question

我有一个这样的代码下拉列表：

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

我用 jquery 将它们转换成一个列表：

    <script type="text/javascript">//<![CDATA[ 
    $(window).load(function(){
    $(function() {
        var $yearFilter = $("#Folder");
        $yearFilter.find("option").map(function() {
            var $this = $(this);
            return $("<li>").attr("value",$this.attr("value")).text($this.text()).get();
        }).appendTo($("<ul>").attr({
                    id: $yearFilter.attr("id"),
            name: $yearFilter.attr("name")
        })).parent().replaceAll($yearFilter);
    });
    });//]]>  
    </script>

这给了我这个：

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

但是，我想要实现的是：

    <ul id="Folder">
    <li>Top Folder</li>
    <li>2nd Folder 01
    <ul class="something01">
    <li>3rd Folder 01-01</li>
    <li>3rd Folder 01-02
    <ul>
    <li>4th Folder 01-02-01
    <ul class="something01-02-01">
    <li>5th Folder 01-02-01-01</li>
    <li>5th Folder 01-02-01-02</li>
    <li>5th Folder 01-02-01-03</li>
    <li>5th Folder 01-02-01-04</li>
    <li>5th Folder 01-02-01-05</li>
    </ul>
    </li>
    </ul>
    </li>
    <li>3rd Folder 03</li>
    <li>3rd Folder 04</li>
    <li>3rd Folder 05
    <ul class="something05">
    <li>5th Folder 01-02-05-01</li>
    <li>5th Folder 01-02-05-02</li>
    <li>5th Folder 01-02-05-03</li>
    <li>5th Folder 01-02-05-04</li>
    <li>5th Folder 01-02-05-05</li>
    <li>5th Folder 01-02-05-06</li>
    </ul>
    </li>
    </ul>
    </li>
    <li>2nd Folder 02
    <ul class="something02">
    <li>3rd Folder 02-01</li>
    <li>3rd Folder 02-02</li>
    <li>3rd Folder 02-03</li>
    </ul>
    </li>
    <li>2nd Folder 03
    <ul class="something03">
    <li>3rd Folder 03-01</li>
    <li>3rd Folder 03-02
    <ul>
    <li>4th Folder 03-02-01</li>
    <li>4th Folder 03-02-02</li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>

所以我想知道是否有一种方法可以根据破折号“-”将所有第二、第三等级别分组到一个 ul 组中。还是我必须给每个 li 一个班级然后从那里分组？

Answer 1

是的，您应该能够使用破折号，前提是级别始终是破折号的数量除以三。关键是使用堆栈。它还有助于具有计算破折号的功能。

// Helper function.
function countLeadingChars(str, ch) {
    for (var i = 0; i < str.length; i++) {
        if (str.charAt(i) !== ch) {
            return i;
        }
    }
    return str.length;
}

var stack = [];

$('#Folder').children().each(function() {
    var $option = $(this);

    var text = $option.text();

    // Count the dashes.
    var dashes = countLeadingChars(text, '-');

    // Level is # of dashes divided by 3.
    var level = dashes / 3;

    // Remove anything in the stack beyond the current level.
    // This will cause new <ul>s to get created when higher
    // levels are encountered again.
    if (stack.length > (level + 1)) {
        stack.length = level + 1;
    }

    // Get the <ul> for the level, creating it if it doesn't exist.
    var $ul = stack[level];
    if (!$ul) {
        $ul = $('<ul/>');
        stack[level] = $ul;

        // Add the <ul> to the last <li> of the parent <ul>.
        if (level > 0) {
            stack[level - 1].children(':last').append($ul);

            // Add the "class" to the <ul>.
            var parentText = $ul.parent().text();
            var index = parentText.lastIndexOf(' ');
            $ul.addClass('something' + parentText.slice(index + 1));
        }
    }

    // Create the <li> and add it to the <ul>.
    $('<li>' + text.slice(dashes) + '</li>').appendTo($ul);
});

// At this point, stack[0] is the top-most <ul>.

Live Demo on jsfiddle

编辑：我刚刚注意到您想要在 <ul> 元素上添加一个“类”，我在上面添加了代码。

New Live Demo on jsfiddle

Answer 2

查看标签 optgroup 是否可以解决您的问题

http://www.w3schools.com/tags/tag_optgroup.asp