---
title: "How to add striped styling to a list of items?"  
description: "How to add striped styling to a list of items?"  
author: "Elena Glibart"  
published: 2015-05-26  
updated: 2015-05-26  
canonical: https://www.mindstick.com/forum/23265/how-to-add-striped-styling-to-a-list-of-items  
category: "javascript"  
tags: ["style", "knockout.js", "list"]  
reading_time: 1 minute  

---

# How to add striped styling to a list of items?

I’m want to striped styling to a list of [items](https://www.mindstick.com/forum/33812/getting-number-of-items-selected-in-uicollectionview-in-ios) with knockoutjs. The [class](https://www.mindstick.com/blog/165/generic-class-in-c-sharp) on the div below should be even or [odd](https://yourviews.mindstick.com/view/86337/delhi-odd-even-scheme-is-active-again-what-is-it-and-why-it-is-in-the-news) depending where it is in the list.

```
<div class="Headlines loader"      data-bind="css: { loader: headlines().length == 0 },                        template: { name: 'recentHeadlinesTemplate',                                   foreach: beforeHeadlineAddition,                                    beforeRemove: function(elem) { $(elem).slideUp() },                                   afterAdd: slideDown }"></div> <script type="text/html" id="recentHeadlinesTemplate">    <div class="even">        ${Title}    </div>  </script>
```

## Replies

### Reply by Norman Reedus

Try this code

```
ko.bindingHandlers.stripe = {    update:function(element, valueAccessor, allBindingsAccessor) {        var value =ko.utils.unwrapObservable(valueAccessor()); //creates the dependency        var allBindings = allBindingsAccessor();        var even =allBindings.evenClass;        var odd =allBindings.oddClass;         //update odd rows       
$(element).children(":nth-child(odd)").addClass(odd).removeClass(even);        //update even rows        $(element).children(":nth-child(even)").addClass(even).removeClass(odd);;    }}
```

and be used like:

<ul data-bind="template: { name: 'itemsTmpl', foreach: items }, stripe: items, evenClass: 'light', oddClass: 'dark'"></ul>


---

Original Source: https://www.mindstick.com/forum/23265/how-to-add-striped-styling-to-a-list-of-items

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.