Как прокручивать список 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>

И у меня есть файл 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(). Не могли бы вы мне помочь? Благодарю.

Ответ 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';

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

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

Ответ 4

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

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

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

Он использует underscore и jQuery, оба инструмента, о которых вы должны знать или, по крайней мере, понять, как их использовать, если вы хотите назвать себя программистом.