根据破折号'-'将li分组为ul [英] Group li into ul based on dash '-'

问题描述

我得到了这样的代码下拉列表:

I got a code dropdown like this:

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

然后我将它们转换为列表:

And I jquery convert them into a list:

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

但是，我想要实现的是:

However, what I want to achieved is:

    <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上一堂课然后从那里分组?

So what I wondering is if there is a way to group all the 2nd, 3rd etc levels into a ul group based on the dash '-'. Or do I have to give each li a class then group from there?

推荐答案

是的，如果级别始终是破折号的数量除以三，则您应该能够使用破折号.关键是要使用堆栈.拥有一个破折号计数功能也有帮助.

Yes, you should be able to use the dashes, provided that the level is always the number of dashes divided by three. The key is to use a stack. It also helps to have a function to count the dashes.

// 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>元素上添加一个类".

I just noticed you wanted a "class" on the <ul> elements I added the code for that above.

关于jsfiddle的新实时演示

这篇关于根据破折号'-'将li分组为ul的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！