How to iterate through ul list using Javascript?

Question

I have the following HTML page (page is simplified here as it is a sample of the real one):

Answer 1

I know you can't use jQuery for this, but I thought I'd supply a solution for others that may be able to:

$(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 2

Basically:

1. In order to find the element which caused the event you have to add an identifier to the a or li element and then use it as a parameter to your function. For example:

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

2. You can also use the ul id as parameter for your function, so you can know which is the ul that you need. I supposed that you generate your ul dinamically:

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

3. Then you have the reference for the ul and you can implement a function to iterate on the list items and give to the function the ul node using the id_ul. For example:

   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

No. Getting links by getElementsByTagName("a") is your one-off web-developer solution.

You can also traverse the DOM properly by childNodes, and this solution generalizes to all UL lists you may have:

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

It uses underscore and jQuery.

Answer 4

You should call getElementsByTagName() only once, caching the result.

Then iterate over the collection like this (instead of using 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';

To get the target, you can pass it as the parameter in the 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>

Then your javascript can look like this:

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';
}

Example: http://jsbin.com/aroda3/