查找并追加嵌套<ul>选择带有连字符的菜单
Find and append nested <ul> to select menu with hyphens
尝试从现有菜单创建导航,下面是标记:
<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。这也将处理多层菜单。跟踪递归级别和要与破折号连接的更高级别的项。
方法的描述:http://blog.swapnilsarwe.com/javascript-traversing-html-dom-recursively.html
Edit:这里有一个例子。您还需要在某处放置一个id='select'的HTML选择元素:
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);
}
}
}
这里有一个小提琴:http://jsfiddle.net/GM54F/3/
就用jQuery吧。下面是一个jsFiddle,它根据您的代码演示了这个示例。这比自己编写自定义代码来遍历DOM要简单得多。
$("#nav a").each(function(){
myValue = $(this).attr("href");
myText = $(this).text();
$("#mySelect").append("<option value="+myValue + ">" + myText +"</option>");
});
相关文章:
- 如何将单词(包括单词)与连字符匹配
- 删除图形和数字之间的连字符(-)符号
- JQuery根据连字符前的首字母对列表进行排序
- 如何替换javascript字符串中的前三个连字符
- 带有连字符的 Jquery 表排序器编号
- Javascript将所有文本框值更改为连字符
- regex中连字符的这种用法有效吗
- 使用连字符引用对象的属性名称
- 用连字符分隔匹配值
- 跳过用户输入的文本字符串中的特殊字符,并在 Javascript 中的每个单词后添加连字符
- 为什么不'我的javascript函数允许点,但允许连字符
- 如何防止电子邮件地址的css自动连字符
- 在数组中的偶数之间插入连字符
- JS Regex只允许数字、分号和连字符
- Javascript正则表达式,返回连字符和空格后面的数字
- jQuery只允许使用数字、字母和连字符
- e.减号连字符的哪个键代码已更改
- 在javascript中组合使用连字符连接的两个字符串
- 如何仅替换第一个数字(用连字符分隔)
- 查找并追加嵌套
- 选择带有连字符的菜单