JSFiddle - React, Tailwind, and code Playground

by tomgrohl

HTML

<ul id="colorlist">
    
    <li>Test</li>
    <li style="display: none">Test2</li>
    <li>Test3</li>
    <li style="display: none">Test4</li>
    <li style="display: none">Test5</li>      
    <li>Test</li>
    <li style="display: none">Test2</li>
    <li>Test3</li>
    <li style="display: none">Test4</li>
    <li style="display: none">Test5</li>  
    <li>Test</li>
    <li style="display: none">Test2</li>
    <li>Test3</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>
    <li>Test</li>
    <li style="display: none">Test2</li>
    <li>Test</li>
    <li style="display: none">Test2</li>
    <li>Test3</li>
    <li style="display: none">Test4</li>
    <li style="display: none">Test5</li>      
    <li>Test</li>
    <li style="display: none">Test2</li>
    <li>Test3</li>
    <li style="display: none">Test4</li>
    <li style="display: none">Test5</li>  
    <li>Test</li>
    <li style="display: none">Test2</li>
    <li>Test3</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>
    <li>Test</li>
    <li style="display: none">Test2</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>   
    <li>Test</li>
    <li style="display: none">Test2</li>
    <li>Test3</li>
    <li style="display: none">Test4</li>
    <li style="display: none">Test5</li>      
    <li>Test</li>
    <li style="display: none">Test2</li>
    <li>Test3</li>
    <li style="display: none">Test4</li>
    <li style="display: none">Test5</li>  
    <li>Test</li>
    <li style="display: none">Test2</li>
    <li>Test3</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>
    <li>Test</li>
    <li style="display: none">Test2</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>      
</ul>

CSS

.first-column{
    color: red;
}

JavaScript

$("#colorlist li:visible").each(function(i, elem){
       var $el = $(this);
       //If is 0 add class
       if( i % 15 == 0 ){
           $el.addClass('first-column');
       }
    });