Javascript 如何使用Javascript遍历ul列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4026485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to iterate through ul list using Javascript?
提问by Boris
I have the following HTML page (page is simplified here as it is a sample of the real one):
我有以下 HTML 页面（此处简化了页面，因为它是真实页面的示例）：
<html>
<head>
<script type="text/javascript" src="JavaScript/Painting.js"></script>
</head>
<body>
<div id="center-wrapper">
<div id="side-menu">
<ul>
<li><a onclick="Paint()">About</a></li>
<li><a onclick="Paint()">Contents</a></li>
<li><a onclick="Paint()">Visual</a></li>
<li><a onclick="Paint()">CSS</a></li>
<li><a onclick="Paint()">Javascript</a></li>
</ul>
</div>
</div>
</body>
</html>
And I have the Painting.js file (again, a bit simplified):
我有 Paint.js 文件（同样，有点简化）：
function Paint()
{
var e = window.event;
var sender;
if (e.target)
{
sender = e.target;
}
else
{
if (e.srcElement)
{
sender = e.srcElement;
}
}
for (element in sender.parentNode.parentNode.getElementsByTagName("a"))
{
element.style.color = 'blue';
element.style.backgroundColor = '#FFFFFF';
}
sender.style.color = '#FFFFFF';
sender.style.backgroundColor = '#000000';
}
The basic idea is:
基本思想是：
- Find a HTML element that caused the event.
- Go up until you reach the
<ul>element. - Loop through the list items; find the
<a>tags and change their color and background - Upon exiting the loop, change the color and the background of the HTML element that caused the event.
- 查找导致事件的 HTML 元素。
- 上升直到到达
<ul>元素。 - 循环遍历列表项；找到
<a>标签并更改它们的颜色和背景 - 退出循环后，更改导致事件的 HTML 元素的颜色和背景。
Now, I can't seem to get to the part located in the for loop. I think I am making a mistake by calling GetElementsByTagName() method. Could you help me out? Thanks.
现在，我似乎无法到达位于 for 循环中的部分。我想我通过调用 GetElementsByTagName() 方法犯了一个错误。你能帮我吗？谢谢。
采纳答案by user113716
You should call getElementsByTagName()only once, caching the result.
您应该getElementsByTagName()只调用一次，缓存结果。
Then iterate over the collection like this (instead of using for/in).
然后像这样迭代集合（而不是使用for/in）。
var a_elements = sender.parentNode.parentNode.getElementsByTagName("a");
for (var i = 0, len = a_elements.length; i < len; i++ ) {
a_elements[ i ].style.color = 'blue';
a_elements[ i ].style.backgroundColor = '#FFFFFF';
}
sender.style.color = '#FFFFFF';
sender.style.backgroundColor = '#000000';
To get the target, you can pass it as the parameter in the inline onclick:
要获取目标，您可以将其作为 inline 中的参数传递onclick：
<ul>
<li><a onclick="Paint(this)">About</a></li>
<li><a onclick="Paint(this)">Contents</a></li>
<li><a onclick="Paint(this)">Visual</a></li>
<li><a onclick="Paint(this)">CSS</a></li>
<li><a onclick="Paint(this)">Javascript</a></li>
</ul>
Then your javascript can look like this:
然后你的 javascript 看起来像这样：
function Paint( sender ) {
var a_elements = sender.parentNode.parentNode.getElementsByTagName("a");
for (var i = 0, len = a_elements.length; i < len; i++ ) {
a_elements[ i ].style.color = 'blue';
a_elements[ i ].style.backgroundColor = '#FFFFFF';
}
sender.style.color = '#FFFFFF';
sender.style.backgroundColor = '#000000';
}
Example:http://jsbin.com/aroda3/
示例：http : //jsbin.com/aroda3/
回答by Nervo Verdezoto
Basically:
基本上：
In order to find the element which caused the event you have to add an identifier to the aor lielement and then use it as a parameter to your function. For example:
<li id='id_li1'><a onclick="Paint(id_li1)">About</a></li>You can also use the ul idas parameter for your function, so you can know which is the ul that you need. I supposed that you generate your ul dinamically:
<a onclick="Paint(id_li1, id_ul)">About</a>Then you have the reference for the ul and you can implement a function to iterate on the list items and give to the function the ulnode using the id_ul. For example:
function processUL(ul) { if (!ul.childNodes || ul.childNodes.length == 0) return; // Iterate LIs for (var itemi=0;itemi<ul.childNodes.length;itemi++) { var item = ul.childNodes[itemi]; if (item.nodeName == "LI") { // Iterate things in this LI in the case that you need it put your code here to get the a element and change the color and background ..... } } }
为了找到导致事件的元素，您必须向a或li元素添加一个标识符，然后将其用作函数的参数。例如：
<li id='id_li1'><a onclick="Paint(id_li1)">About</a></li>您还可以使用ul id作为函数的参数，这样您就可以知道哪个是您需要的 ul。我假设你以动态方式生成你的 ul：
<a onclick="Paint(id_li1, id_ul)">About</a>然后你有 ul 的引用，你可以实现一个函数来迭代列表项，并使用 id_ul将ul节点提供给函数。例如：
function processUL(ul) { if (!ul.childNodes || ul.childNodes.length == 0) return; // Iterate LIs for (var itemi=0;itemi<ul.childNodes.length;itemi++) { var item = ul.childNodes[itemi]; if (item.nodeName == "LI") { // Iterate things in this LI in the case that you need it put your code here to get the a element and change the color and background ..... } } }
回答by Hollister
I know you can't use jQuery for this, but I thought I'd supply a solution for others that may be able to:
我知道你不能为此使用 jQuery，但我想我会为其他人提供一个解决方案，这些解决方案可能能够：
$(function(){
$("li a").click(function(){
$(this).parent().siblings().each(function(){
$(this).find("a").css({'color':'blue','background-color':'white'});
});
$(this).css({'color':'white','background-color':'black'});
return false;
});
});
回答by sigs
No. Getting links by getElementsByTagName("a") is your one-off web-developer solution.
不。通过 getElementsByTagName("a") 获取链接是您的一次性 Web 开发人员解决方案。
You can also traverse the DOM properly by childNodes, and this solution generalizes to all UL lists you may have:
您还可以通过 childNodes 正确遍历 DOM，并且此解决方案可推广到您可能拥有的所有 UL 列表：
_($("#my-list")[0].childNodes).filter(function(node) { return node.nodeName == "LI"; })
It uses underscore and jQuery.
它使用下划线和 jQuery。
