How to alternate list iems with Javascript

December 10, 2005

development

So, TJ and I were trying to figure out a way to get the sidebar on ganb to alternate list item background colors. We did some research on possible CSS classes and pseudo classes but could not figure out a way to do it how we wanted to. So, I set out to create reusable javascript method to take care of this issue.

What I wanted:
1. alternating list item background colors
2. ability to specify which container i wanted to apply this method to (in this case a div).

So, here it is ...

<script language="javascript">

    function doLoadFunctions() {
        setListItemAltColor('test2');
    }

    function setListItemAltColor (src) {
        var divWithLists = document.getElementById(src);
        var items = divWithLists.getElementsByTagName('li');
        var itemsLength = items.length;

        for ( i = 0; i < itemsLength; i++ ) {
            if ( i%2 == 0 ) { 
                items\[i\].style.backgroundColor = "#369"; 
            }
        }
    }

  </script>

I generally have a function that handles all onload javascript events that I call like this: body onload="doLoadFunctions()". Within function doLoadFunctions(), simply call function setListItemAltColor(src), whereas src is the container you wish to apply this to. In the example above, the div I want to apply this to is 'test2'.

There are a few interesting javascript functions I used in this code.
1. if ( i%2 == 0) -- checks to see if integer i is odd or even
2. divWithLists.getElementsByTagName('tag') returns a collection of all elements with the specified tag -- in this instance it's all 'li' tags. `

Enjoy

Show Comments

Active Projects

I'm always tinkering with new ideas and building interesting things. From AI-powered tools to micro-SaaS products, these are the projects currently keeping me up at night. Each one solves a specific problem I've encountered or explores an emerging technology I'm excited about.

🤖 PMPrompt

I recently launched PMPrompt, a curated collection of AI prompts for product managers. The goal is simple - help PMs save time and be more effective by leveraging AI in their daily workflow. Read more about this project in my blog post about building PMPrompt or try the AI-Powered PRD Generator.

📊 SurveySnaps

I recently launched SurveySnaps, a platform that makes collecting location-based feedback dead simple using QR codes. The goal is straightforward - help businesses gather real-time feedback from specific locations without the complexity of traditional survey tools. Read more about this project in my blog post about building SurveySnaps.

🏗️ JSONL Tools

I am working on a set of tools to help me work with JSONL. JSONL is a simple format for working with JSON data. I am working on a set of tools to help me work with JSONL data. I will use these tools to help me work with my own data as well as help me build my own APIs. One of the tools I am developing is a JSONL Validator to ensure the integrity and structure of JSONL data. Read more about this project in my blog post about building JSONL Tools.

🤖 Make Storytime

Personalized children's stories generated by AI. This is an app I am building with my kids.

📠 Fax Online

Yea, I know. But there is a long tail for everything and believe it or not there was an underserved market for people that need to send a fax online. Some people (like me!) just need to send a one time fax.

Read more about this micro Saas project in a blog post about building an online fax service.

🥑 Free URL Indexer

Free URL Indexer is a free tool to help you index your backlinks and get them into Google faster. It's a simple tool that I built to help me with my own SEO efforts and I decided to share it with the world. It's a free tool and I don't even ask for your email address. Just paste in your URL and click the button.

👉 See all projects