Как перебирать список ul с помощью Javascript?

у меня есть следующая 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>

и у меня есть картина.файл 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';

}

основная идея:

  1. найдите HTML-элемент, вызвавший событие.
  2. поднимитесь, пока не достигнете <ul> элемент.
  3. цикл через элементы списка; найти <a> теги и изменить их цвет и фон
  4. при выходе из цикла измените цвет и фон HTML-элемента, вызвавшего событие.

теперь я не могу добраться до части, расположенной в цикле for. Я думаю, что делаю ошибку, вызывая метод GetElementsByTagName (). Не могли бы вы мне помочь? Спасибо.

10
dom javascript

4 ответов

вы должны позвонить 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';

чтобы получить цель, вы можете передать ее в качестве параметра в 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/

12

по сути:

  1. чтобы найти элемент, который вызвал событие, вы должны добавить идентификатор в a или ли элемент, а затем использовать его в качестве параметра в функцию. Например:

    <li id='id_li1'><a onclick="Paint(id_li1)">About</a></li>

  2. вы также можете использовать ul id как параметр для вашей функции, поэтому вы можете знать который ул который вам. Я предполагал, что вы создаете свой ul динамично:

    <a onclick="Paint(id_li1, id_ul)">About</a>

  3. тогда у вас есть ссылка для ul, и вы можете реализовать функцию для итерации по элементам списка и дать функции ul узел, использующий id_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
            .....
        }
    }
}
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;
    });
});
1

нет. Получение ссылок с помощью getElementsByTagName ("a")-это одноразовое решение для веб-разработчиков.

вы также можете правильно пройти DOM по childNodes, и это решение обобщается на все списки UL, которые у вас могут быть:

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

он использует подчеркивание и jQuery.

-4