如何使用Javascript迭代ul列表?

前端之家收集整理的这篇文章主要介绍了如何使用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>

而且我有了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';

}

基本思路是:

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

现在,我似乎无法到达位于for循环中的部分.我认为我通过调用GetElementsByTagName()方法错误.你可以帮我吗谢谢.

解决方法

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

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

获取目标,您可以将其作为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可以看起来像这样:

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';
}

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

猜你在找的JavaScript相关文章