{"authorId":1,"title":{"title":{}},"slug":"improved-javascript-striping","postDate":1177456442,"expiryDate":null,"enabled":1,"fields":{"2":"<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>\n\n<p>Well, I ran into a little problem with the splintered striper, and I have a solution to the problem.<\/p>\n<!--more-->\n<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>\n\n<h2>Striping Example with Problem<\/h2>\n\n<p>Say we start with the following markup:<\/p>\n\n<div class=\"codeblock\"><code>\n&lt;ul&nbsp;class=\"stripe&nbsp;something\"&gt;<br \/>&nbsp;&lt;li&gt;This&nbsp;is&nbsp;an&nbsp;odd&nbsp;row.&lt;\/li&gt;<br \/>&nbsp;&lt;li&gt;This&nbsp;is&nbsp;an&nbsp;even&nbsp;row.&lt;\/li&gt;<br \/>&nbsp;&lt;li&gt;This&nbsp;is&nbsp;an&nbsp;odd&nbsp;row.&lt;\/li&gt;<br \/>&nbsp;&lt;li&gt;This&nbsp;is&nbsp;an&nbsp;even&nbsp;row.&lt;\/li&gt;<br \/>&nbsp;&lt;li&gt;This&nbsp;is&nbsp;an&nbsp;odd&nbsp;row.&lt;\/li&gt;<br \/>&nbsp;&lt;li&gt;This&nbsp;is&nbsp;an&nbsp;even&nbsp;row.&lt;\/li&gt;<br \/>&lt;\/ul&gt;&nbsp;\n\n<\/code><\/div>\n\n<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>\n\n<div class=\"codeblock\"><code>\naddLoadEvent(function()&nbsp;&#123;<br \/>&nbsp;&nbsp;striper('ul','stripe','li','odd,even');<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<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>\n\n<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>\n\n<div class=\"codeblock\"><code>\nif&nbsp;((parentElementClass&nbsp;==&nbsp;null)||(currentParent.className&nbsp;==&nbsp;parentElementClass))&nbsp;&#123;&nbsp;\n\n<\/code><\/div>\n\n<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>\n\n<p>I have created a <a href=\"http:\/\/trevordavis.net\/play\/striper\/indexBad.html\">simple demo page<\/a> with an unordered list, table, and paragraphs that are supposed to be striped.<\/p>\n\n<h2>Fixing the Striper<\/h2>\n\n<p>Really all you have to do to the JavaScript is to remove the line from above and replace with the lines below:<\/p>\n\n<div class=\"codeblock\"><code>\nvar&nbsp;pattern&nbsp;=&nbsp;new&nbsp;RegExp(\"(^|&nbsp;)\"&nbsp;+&nbsp;parentElementClass&nbsp;+&nbsp;\"(&nbsp;|$)\");<br \/>if&nbsp;((parentElementClass&nbsp;==&nbsp;null)||(currentParent.className.match(pattern)))&nbsp;&#123;&nbsp;\n\n<\/code><\/div>\n\n<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>\n\n<p>Here is a <a href=\"http:\/\/trevordavis.net\/play\/striper\/\">little demo of the improved splintered striper<\/a>.<\/p>\n\n<p>I&rsquo;m sure there is another way to do that easier, so feel free to let me know if there is.<\/p>","4":{"website":{}}}}