Javascript 查找并附加嵌套以选择带有连字符的菜单
尝试从现有菜单创建导航,以下是标记:Javascript 查找并附加嵌套以选择带有连字符的菜单,javascript,html-lists,Javascript,Html Lists,尝试从现有菜单创建导航,以下是标记: <nav> <ul id="nav"> <li> <a href="?=home">Home</a> <ul> <li><a href="?=sub-1">Sub 1</a></li> <li>
<nav>
<ul id="nav">
<li>
<a href="?=home">Home</a>
<ul>
<li><a href="?=sub-1">Sub 1</a></li>
<li><a href="?=sub-2">Sub 2</a></li>
<li><a href="?=sub-3">Sub 3</a></li>
<li><a href="?=sub-4">Sub 4</a></li>
<li><a href="?=sub-5">Sub 5</a></li>
</ul>
</li>
<li>
<a href="?=about">About</a>
</li>
<li>
<a href="?=services">Services</a>
</li>
<li>
<a href="?=portfolio">Portfolio</a>
</li>
<li>
<a href="?=contact">Contact</a>
</li>
</ul>
</nav>
这就是我使用的javascript循环,它当前查找并附加每个顶级菜单项,但我确实不确定如何将嵌套子项作为目标,并在嵌套元素中附加连字符
var nav = document.getElementById('nav');
var list = nav.children.length;
for (var i = 0; i < list; i++) {
var option = document.createElement('option');
option.innerHTML = nav.children[i].children[0].innerHTML;
option.value = nav.children[i].children[0].href;
select.appendChild(option);
}
所以它基本上是这样做的:
<select>
<option value="?=home">Home</option>
<option value="?=sub-1">- Sub 1</option>
<option value="?=sub-2">- Sub 2</option>
等等等等
任何帮助都将不胜感激!谢谢。您可以递归遍历ul。这也将处理多级菜单。跟踪递归级别和更高级别的项,以便与破折号连接 方法说明: 编辑:这里有一个例子。您还需要将id='select'的HTML select元素放在某个地方:
buildSelect(document.getElementById('nav'), '', document.getElementById('select'));
function buildSelect(current, optionSoFar, select) {
var currentLevelOption = optionSoFar;
for (var i=0; i<current.children.length; i++) {
var child = current.children[i];
if ('A' == child.tagName) {
var currentLevelLabel = child.innerText;
var separator = ('' == optionSoFar) ? '' : ' - ';
currentLevelOption = optionSoFar + separator + currentLevelLabel;
var option = document.createElement('option');
option.innerText = currentLevelOption;
option.value = child.href;
select.appendChild(option);
}
else {
buildSelect(child, currentLevelOption, select);
}
}
}
这里有一个难题:只需使用jQuery即可。这将根据您的代码演示此示例。这比自己编写自定义代码来遍历DOM要简单得多
$("#nav a").each(function(){
myValue = $(this).attr("href");
myText = $(this).text();
$("#mySelect").append("<option value="+myValue + ">" + myText +"</option>");
});
jQuery将大大简化这一过程。你考虑过使用它吗?@ColinPear是的,我不想使用jQuery。@harsha是HTML5元素……谢谢!我只是不确定那会是什么样子。@Todd:优化HTML结构可以吗?目前,它太不规则了。一个普通ul只能包含任意数量的1 li,其中只有一个A在另一个普通ul中。易于遍历和样式化。HTML结构不是最终的解决方案,它只是表示我想要实现的目标。它只是很容易编码为演示它将如何工作:-谢谢@托德:我错了;HTML很好。请参见编辑后的答案。它基于您的代码,但做了一些调整。希望有帮助。谢谢:非常感谢你的帮助。祝你新年快乐。