Как перебрать список ul с помощью Javascript? - PullRequest
Новая
       2

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

10 голосов
/ 26 октября 2010

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

}

Основная идея такова:

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

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

Ответы [ 4 ]

12 голосов
/ 26 октября 2010

Вы должны вызывать 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/

3 голосов
/ 26 октября 2010

В основном:

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

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

  2. Вы также можете использовать ul id в качестве параметра для своей функции, чтобы вы могли знать, какой именно ul вам нужен.Я предположил, что вы генерируете свой 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
            .....
        }
    }
}
1 голос
/ 26 октября 2010

Я знаю, что вы не можете использовать 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;
    });
});
0 голосов
/ 21 декабря 2011

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...