JSFiddle - React, Tailwind, and code Playground

by Ankit Patidar

HTML

<ul class="portfolio-excerpt"><li></li><li></li><li></li><li></li><li></li></ul>
<ul>
    <li class="thumbs">
        <ul class="hello">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </li>
</ul>

<span></span>

CSS

li.thumbs li { float:left; width:22px;height:22px; margin: 4px;  }

.class1 { background: red; }
.class2 { background: blue; }
.class3 { background: green; }

span { float:left; margin: 200px; }

JavaScript

var li = $('ul.portfolio-excerpt').find('li');

var iEra, thumbLi = $('.thumbs ul li');
for (iEra = 1; iEra <= li.length; iEra++) {
    thumbLi.eq(iEra).addClass('class'+iEra);
}

/*  $(".hello").children('li').each(function(index) {
 console.log($(this))
   $(this).addClass('class'+ index)
 }); */