Question

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

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

}

基本理念是：

找到导致该事件的HTML元素。
一直走到<ul>元素。
循环列表项;找到<a>标签并更改其颜色和背景
退出循环后，更改导致该事件的HTML元素的颜色和背景。

现在，我似乎无法访问位于for循环中的部分。我想我通过调用GetElementsByTagName（）方法犯了一个错误。你能救我吗？谢谢。

Answer 1

您应该只调用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';

要获取目标，您可以将其作为内联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/

Answer 2

基本上：

为了找到导致事件的元素，您必须在 a 或 li 元素中添加标识符，然后将其用作参数你的功能。例如：
```
<li id='id_li1'><a onclick="Paint(id_li1)">About</a></li>
```
您还可以使用 ul id 作为函数的参数，以便了解所需的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
            .....
        }
    }
}

Answer 3

我知道你不能使用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;
    });
});

Answer 4

您可以使用 ul 获取 document.getelementbyid 元素，然后使用该元素的“children”属性，该属性是其中的列表元素列表。

Answer 5

没有。通过getElementsByTagName（“a”）获取链接是您的一次性Web开发人员解决方案。

您还可以通过childNodes正确遍历DOM，此解决方案可以推广到您可能拥有的所有UL列表：

_($("#my-list")[0].childNodes).filter(function(node) { return node.nodeName == "LI"; })

它使用下划线和jQuery。

如何使用Javascript迭代ul列表？

5 个答案: