根据破折号’ – ‘将li分组为ul
我有一个像这样的代码下拉列表：
Top Folder 2nd Folder 01 ---3rd Folder 01-01 ---3rd Folder 01-02 ------4th Folder 01-02-01 ---------5th Folder 01-02-01-01 ---------5th Folder 01-02-01-02 ---------5th Folder 01-02-01-03 ---------5th Folder 01-02-01-04 ---------5th Folder 01-02-01-05 ---3rd Folder 03 ---3rd Folder 04 ---3rd Folder 05 ------5th Folder 01-02-05-01 ------5th Folder 01-02-05-02 ------5th Folder 01-02-05-03 ------5th Folder 01-02-05-04 ------5th Folder 01-02-05-05 ------5th Folder 01-02-05-06 2nd Folder 02 ---3rd Folder 02-01 ---3rd Folder 02-02 ---3rd Folder 02-03 2nd Folder 03 ---3rd Folder 03-01 ---3rd Folder 03-02 ------4th Folder 03-02-01 ------4th Folder 03-02-02 我将jquery转换为列表：
//<![CDATA[ $(window).load(function(){ $(function() { var $yearFilter = $("#Folder"); $yearFilter.find("option").map(function() { var $this = $(this); return $("").attr("value",$this.attr("value")).text($this.text()).get(); }).appendTo($("").attr({ id: $yearFilter.attr("id"), name: $yearFilter.attr("name") })).parent().replaceAll($yearFilter); }); });//]]>
哪个给了我这个：
- Top Folder
- 2nd Folder 01
- ---3rd Folder 01-01
- ---3rd Folder 01-02
- ------4th Folder 01-02-01
- ---------5th Folder 01-02-01-01
- ---------5th Folder 01-02-01-02
- ---------5th Folder 01-02-01-03
- ---------5th Folder 01-02-01-04
- ---------5th Folder 01-02-01-05
- ---3rd Folder 03
- ---3rd Folder 04
- ---3rd Folder 05
- ------5th Folder 01-02-05-01
- ------5th Folder 01-02-05-02
- ------5th Folder 01-02-05-03
- ------5th Folder 01-02-05-04
- ------5th Folder 01-02-05-05
- ------5th Folder 01-02-05-06
- 2nd Folder 02
- ---3rd Folder 02-01
- ---3rd Folder 02-02
- ---3rd Folder 02-03
- 2nd Folder 03
- ---3rd Folder 03-01
- ---3rd Folder 03-02
- ------4th Folder 03-02-01
- ------4th Folder 03-02-02
但是，我想要达到的目标是：
- Top Folder
- 2nd Folder 01
- 3rd Folder 01-01
- 3rd Folder 01-02
- 4th Folder 01-02-01
- 5th Folder 01-02-01-01
- 5th Folder 01-02-01-02
- 5th Folder 01-02-01-03
- 5th Folder 01-02-01-04
- 5th Folder 01-02-01-05
- 3rd Folder 03
- 3rd Folder 04
- 3rd Folder 05
- 5th Folder 01-02-05-01
- 5th Folder 01-02-05-02
- 5th Folder 01-02-05-03
- 5th Folder 01-02-05-04
- 5th Folder 01-02-05-05
- 5th Folder 01-02-05-06
- 2nd Folder 02
- 3rd Folder 02-01
- 3rd Folder 02-02
- 3rd Folder 02-03
- 2nd Folder 03
- 3rd Folder 03-01
- 3rd Folder 03-02
- 4th Folder 03-02-01
- 4th Folder 03-02-02
所以我想知道的是，是否有一种方法可以将所有第2，第3等级组合成基于短划线’ – ‘的ul组。 或者我必须给每个李一个class级，然后从那里分组？
是的，您应该能够使用破折号，前提是该等级始终是破折号除以3。 关键是使用堆栈。 它还有助于计算破折号的function。
// 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 s to get created when higher // levels are encountered again. if (stack.length > (level + 1)) { stack.length = level + 1; } // Get the
for the level, creating it if it doesn't exist. var $ul = stack[level]; if (!$ul) { $ul = $('
'); stack[level] = $ul; // Add the
to the last - of the parent
. if (level > 0) { stack[level - 1].children(':last').append($ul); // Add the "class" to the
. var parentText = $ul.parent().text(); var index = parentText.lastIndexOf(' '); $ul.addClass('something' + parentText.slice(index + 1)); } } // Create the - and add it to the
. $('- ' + text.slice(dashes) + '
').appendTo($ul); }); // At this point, stack[0] is the top-most
.
在jsfiddle上现场演示
编辑：我刚刚注意到你想要
元素上的“类”我添加了上面的代码。
关于jsfiddle的新现场演示
请参阅标签optgroup以及它是否解决了您的问题