javascript - 如何使用 Javascript 遍历 ul 列表？-6ren

javascript - 如何使用 Javascript 遍历 ul 列表？

转载作者：可可西里更新时间：2023-11-01 02:39:04

25

4

我有以下 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() 方法犯了一个错误。你能帮帮我吗？谢谢。

最佳答案

您应该只调用一次 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/

关于javascript - 如何使用 Javascript 遍历 ul 列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4026485/

25

4

0

文章推荐： javascript - 在 sencha touch 中使用按钮导航

文章推荐： java - RabbitMQ java 客户端停止消费消息

文章推荐： java - PowerMockRunner 不应用 JUnit ClassRules

jQuery:仅选择 ul，而不选择 ul ul
我正在尝试使用 jQuery 来提交一个基本的 Accordion 样式菜单。这是菜单: http://www.cybart.com/bscg/ 这是为其提供 Accordion 功能的代码片段:
html - 增加嵌套 (ul ul ul li) 下拉导航列表项的宽度
这是我的网站: http://www.simply-a-christian.com/index.html 在导航栏上，如果您移动到: 信念玛丽安教义您可以看到每个 Marian Dogma(列出了
jquery - 当 ul ul 活跃时 ul parent 移动
这可能是一个很容易回答的问题，但是，我找不到解决方案。我已经建立了一个非常简单的菜单，每当我将鼠标悬停在 ul 父项上时，它的子项 ul ul 就会变得可见。基本上它是有效的，但 parent 让位于
HTML 下拉菜单 : "nav ul ul ul li" Too Low
这是一张图片: 问题是(你可以看到):“页面”按钮太低，无法点击。我想要的是它应该靠近“联系人”。现在是代码: HTML Home About
jquery - 如何在不破坏每个

首页

博学

6Ren·AI

商城

javascript - 如何使用 Javascript 遍历 ul 列表？