如何使用Javascript迭代ul列表？

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

不能。通過getElementsByTagName（“a”）獲取鏈接是您的一次性Web開發人員解決方案。

您還可以通過childNodes正確遍歷DOM，此解決方案可以概括為您可能擁有的所有UL列表：

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

它使用下划線和jQuery。

如何使用Javascript迭代ul列表？

問題描述

4 個解決方案

解決方案1
12 已采納 2010-10-26 18:08:23

解決方案2
3 2010-10-26 18:14:53

解決方案3
1 2010-10-26 18:41:57

解決方案4
-4 2011-12-21 09:22:51

如何使用Javascript迭代ul列表？

問題描述

4 個解決方案

解決方案1 12 已采納 2010-10-26 18:08:23

解決方案2 3 2010-10-26 18:14:53

解決方案3 1 2010-10-26 18:41:57

解決方案4 -4 2011-12-21 09:22:51

解決方案1
12 已采納 2010-10-26 18:08:23

解決方案2
3 2010-10-26 18:14:53

解決方案3
1 2010-10-26 18:41:57

解決方案4
-4 2011-12-21 09:22:51