集团李进UL基于破折号“ - ”(Group li into ul based on dash &#

我有一个代码下拉列表如下：

<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组“ - ”。 还是我给每个李一类，那么一群来自那里？

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>.

现场演示上的jsfiddle

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

上的jsfiddle新现场演示

Answer 2:

查看标签OPTGROUP，如果它解决您的问题

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

文章来源: Group li into ul based on dash '-'