JSFiddle - React, Tailwind, and code Playground

by steakpi

HTML

<div id="count"></div>
<div id="activeNumber"></div>
<div>Loopback</div><div id="targetNumber"></div>

<ul id="myList">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li class="active">item8</li>
    <li >item9</li>
    <li  >item10</li>
</ul>

CSS

.target{background:#f00;}

JavaScript

var count = $('#myList li').length;
var activeNumber = $('#myList li.active').index() + 1;
var targetNumber =  activeNumber +3

var obj = $('#myList li');
    
    obj.push(arr);
var arr = obj.length;

for (i=0;i<count; i++){
//console.log(obj[i]);
    if($(obj[i]).hasClass('active')){
    //console.log(obj[i]);
    target = i + 3
    if(target > count){
       loopback =  target - target + 1;
        
        
        $(obj[loopback]).addClass('target');
    }
        else{
            $(obj[target]).addClass('target');  
        }  
    }
}

$('#count').append(arr);
$('#activeNumber').append(activeNumber);


//console.log($(obj[1]))