我得到了这样的代码下拉列表：
<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>
所以我想知道是否有办法根据破折号' - '将所有第2，第3等等级别分组到ul组中。或者我是否必须从那里给每个李一个班级？
答案 0 :(得分：1)
请参阅标签optgroup以及它是否解决了您的问题
答案 1 :(得分：1)
是的，您应该能够使用破折号，前提是该等级始终是破折号除以3。关键是使用堆栈。它还有助于计算破折号的功能。
// 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>.
编辑：我刚刚注意到您想在<ul>元素上添加“类”，我为此添加了代码。