如何使用Javascript迭代ul列表？ [英] How to iterate through ul list using Javascript?
问题描述
我有以下HTML页面（页面在这里简化为实际样本）：
I have the following HTML page (page is simplified here as it is a sample of the real one):
<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>
我有Paint.js文件（再次简单）：
And I have the Painting.js file (again, a bit simplified):
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';
}
基本思想是：
- 查找导致事件的HTML元素。
- 直到你达到
< ul> ;元素。 - 循环列出项目;找到
< a>标签并更改其颜色和背景 - 退出循环后，更改颜色和背景导致事件的HTML元素。
- 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.
现在，我似乎无法访问位于for循环中的部分。我认为我通过调用GetElementsByTagName（）方法犯错误。你可以帮我吗谢谢。
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.
推荐答案
您应该只调用 getElementsByTagName（）一次，缓存结果
You should call getElementsByTagName() only once, caching the result.
然后像这样迭代集合（而不是在中使用）。
Then iterate over the collection like this (instead of using 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';
要获取目标，可以将其作为参数传递到内联 onclick ：
To get the target, you can pass it as the parameter in the 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>
然后你的javascript可以这样：
Then your javascript can look like this:
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';
}
这篇关于如何使用Javascript迭代ul列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
