如何使用Javascript迭代ul列表？

Question

如何使用Javascript迭代ul列表？

我有以下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>

Run Code Online (Sandbox Code Playgroud)

我有Painting.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';

}

Run Code Online (Sandbox Code Playgroud)

基本思路是:

找到导致该事件的HTML元素.
上去,直到你到达<ul>元素.
遍历列表项; 找到<a>标签并更改其颜色和背景
退出循环后,更改导致该事件的HTML元素的颜色和背景.

现在,我似乎无法进入位于for循环中的部分.我想我通过调用GetElementsByTagName()方法犯了一个错误.你能救我吗？谢谢.

Answer 1

use*_*716 13

你应该getElementsByTagName()只调用一次,缓存结果.

然后像这样迭代集合(而不是使用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';

Run Code Online (Sandbox Code Playgroud)

要获取目标,可以将其作为内联中的参数传递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>

Run Code Online (Sandbox Code Playgroud)

然后你的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';
}

Run Code Online (Sandbox Code Playgroud)

示例: http ://jsbin.com/aroda3/

归档时间：	14 年，10 月前
查看次数：	50614 次
最近记录：	7 年，3 月前