Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to iterate through ul list using Javascript?

Tags:

javascript

dom

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

<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>

And I have the Painting.js file (again, a bit simplified):

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

}

The basic idea is:

  1. Find a HTML element that caused the event.
  2. Go up until you reach the <ul> element.
  3. Loop through the list items; find the <a> tags and change their color and background
  4. Upon exiting the loop, change the color and the background of the HTML element that caused the event.

Now, I can't seem to get to the part located in the for loop. I think I am making a mistake by calling GetElementsByTagName() method. Could you help me out? Thanks.

like image 978
Boris Avatar asked Oct 26 '10 17:10

Boris


People also ask

How to get all li elements JavaScript?

To get all li elements in an array with JavaScript, we can call the getElementsByTagName method to get all the li elements. Then we can use the spread operator to spread all the items in the node list to an array. to call document. getElementById("navbar") to get the div element.

How do you iterate through a list in HTML?

The forEach() method can now be used to iterate over the elements like an array and display them. The elements can be iterated through by using a normal for loop. The number of elements in the HTMLCollection can be found out by using the length property of the collection.

How can get Li count in jquery?

JavaScript Code :$("button"). click(function(){ console. log($("li"). length); });


1 Answers

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/

like image 178
user113716 Avatar answered Sep 18 '22 20:09

user113716