JSFiddle - React, Tailwind, and code Playground

by mauro_nappolini

HTML

<ul class="item">
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li class="parent">green</li>
        <li class="parent parent-none">red</li>

    <li class="parent parent-none">red</li>
    <li class="parent parent-none">red</li>
    <li class="parent parent-none">red</li>

    <li class="parent">red</li>
    <li class="parent">red</li>
    <li class="parent">red</li>
        <li class="parent">red</li>
    <li class="parent">red</li>
    <li class="parent">red</li>
    <li class="parent">red</li>

    <li class="parent parent-none">red</li>
    <li class="parent">red</li>
    <li class="parent">red</li>
</ul>

CSS

.parent-none{
  display: none;
}


ul {
    width:100px;
    height: 100px;
    display: block;
}

JavaScript

$(".parent").each(function() {
    if ($(this).is(":visible")){
    $(".parent:nth-child(odd)").css("background-color" , "red")
        $(".parent:nth-child(even)").css("background-color" , "yellow")
    		console.log('Is visible')  
        

} else {
		$( ".parent-none" ).remove();
       console.log('Is not visible')   
    }
});






$(".merchants-list-item").each(function() {
    if ($(this).is(":visible")){
    $(".merchants-list-item:nth-child(odd)").css("background-color" , "red")
        $(".merchants-list-item:nth-child(even)").css("background-color" , "yellow")
    		console.log('Is visible')  
        

} else {
		$( ".jetboost-list-item-hide" ).remove();
       console.log('Is not visible')   
    }
});