<p>I am sure everyone has seen the <a href="http://24ways.org/2005/splintered-striper">JavaScript Splintered Striper</a>, which was shown during the 2005 <a href="http://24ways.org">24 Ways to Impress Your Friends</a>, or at least some variation of it. A <a href="http://www.google.com/search?source=ig&amp;hl=en&amp;q=javascript+%2B+striper&amp;btnG=Google+Search">quick Google for javascript striper</a> came up with a ton of results.</p>

<p>Well, I ran into a little problem with the splintered striper, and I have a solution to the problem.</p>

<p>The problem occurred if you had multiple class names on the element you are trying to stripe. That may not make much sense, so I guess an example will suffice.</p>

<h2>Striping Example with Problem</h2>

<p>Say we start with the following markup:</p>

<div class="codeblock"><code>
&lt;ul class="stripe something"&gt;<br /> &lt;li&gt;This is an odd row.&lt;/li&gt;<br /> &lt;li&gt;This is an even row.&lt;/li&gt;<br /> &lt;li&gt;This is an odd row.&lt;/li&gt;<br /> &lt;li&gt;This is an even row.&lt;/li&gt;<br /> &lt;li&gt;This is an odd row.&lt;/li&gt;<br /> &lt;li&gt;This is an even row.&lt;/li&gt;<br />&lt;/ul&gt; 

</code></div>

<p>We are going to pretend that the class name <code>something</code> actually does something useful. Then using a JavaScript <a href="http://simonwillison.net/2004/May/26/addLoadEvent/">addLoadEvent function</a>, we will add the striping event to run on page load:</p>

<div class="codeblock"><code>
addLoadEvent(function() {<br />  striper('ul','stripe','li','odd,even');<br />}); 

</code></div>

<p>Essentially, we have told the striper function to stripe all list elements (<code>li</code>s) that are descendants of unordered lists (<code>ul</code>s) with the class name of stripe. Then we want to apply the classes odd and even to the alternating list items.</p>

<p>Here is where the problem lies. Since there are two classes on the unordered list, the striper function does not recognize that it has a class name of stripe. Here is the problem in the code:</p>

<div class="codeblock"><code>
if ((parentElementClass == null)||(currentParent.className == parentElementClass)) { 

</code></div>

<p>Since we are just seeing if the class name of the current element is equal to the class name of stripe, this is not true.</p>

<p>I have created a <a href="//trevor-davis.com/play/striper/indexBad.html">simple demo page</a> with an unordered list, table, and paragraphs that are supposed to be striped.</p>

<h2>Fixing the Striper</h2>

<p>Really all you have to do to the JavaScript is to remove the line from above and replace with the lines below:</p>

<div class="codeblock"><code>
var pattern = new RegExp("(^| )" + parentElementClass + "( |$)");<br />if ((parentElementClass == null)||(currentParent.className.match(pattern))) { 

</code></div>

<p>That takes the class name and splits is with a regular expression. So now you could have fifty class names on the element, and it will still work</p>

<p>Here is a <a href="//trevor-davis.com/play/striper/">little demo of the improved splintered striper</a>.</p>

<p>I’m sure there is another way to do that easier, so feel free to let me know if there is.</p>