Question

145

How to iterate through ul list using Javascript?

rated 0 times [ 152] [ 7] / answers: 1 / hits: 70403 / 14 Years ago, tue, october 26, 2010, 12:00:00

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:

Find a HTML element that caused the event.

Go up until you reach the <ul> element.

Loop through the list items; find the <a> tags and change their color and background

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marvinm

Add To Favorites

Follow

Total Points: 406

Total Questions: 104

Total Answers: 121

Location: Iceland

Member since Tue, Jan 25, 2022

2 Years ago

answered 14 Years ago devinjadong · Accepted Answer

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/