select prev and next

by Geo George

HTML

<ul>

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class=""></li>
<li></li>
<li></li>
<li></li>

</ul>

CSS

body{
  background:#000
  
}
li{
  float:left;
  list-style-type:none;
  width:50px;
  height:50px;
  background:red;
  margin-right:5px;
}
li.active,li.sib{
  background:#fff;
}

JavaScript

$(document).ready(function(){
	
  	$("li").on("click",function(){
    
    	$(".sib").removeClass("sib");
    	var thisindex=$(this).index();
      
      $(this).prevAll().each(function(){
      		if($(this).index() >= thisindex - 3){
          	$(this).addClass("sib")
          }
      });
    	$(this).nextAll().each(function(){
      		if($(this).index()<=thisindex + 3){
          	$(this).addClass("sib")
          }
      });
    });


})