JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ul>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="spot">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
</ul>

CSS

.oddProduct {
    background-color: #f90;
}

li::after {
    content: attr(class);
    float: right;
    margin-right: 2em;
}

JavaScript

// the following just generates text content
$('li').each(
    function(i) {
        $(this).text('List item: ' + (i + 1));
    });

var lis = document.querySelectorAll('li.product');

for (var i=0,len=lis.length;i<len;i++){
    if (i%2 == 0){
        lis[i].className = 'oddProduct';
    }
}