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>
<ul>

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

</ul>
<ul>

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

</ul>
<ul>

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

</ul>
<ul>

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

</ul>
<ul>

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

</ul>
<ul>

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

</ul>
<ul>

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

</ul>
<ul>

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

</ul>
<ul>

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

</ul>
<ul>

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

</ul>
<ul>

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

</ul>
<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
  
}
ul{
  width:100%;
  float:left;
  margin:0 0 5px 0;
  margin-bottom:5px;
}
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(){
	  function prevnextsib(ele,eleindex){
     
      ele.prevAll().each(function(){
      		if($(this).index() >= eleindex - 3){
          	$(this).addClass("sib")
          }
      });
    	ele.nextAll().each(function(){
      		if($(this).index()<=eleindex + 3){
          	$(this).addClass("sib")
          }
      });
    }
    
    function topbottom(ele,pindex,eleindex){
         
      ele.prevAll().each(function(){
      		if($(this).index() >= pindex - 3){
          	$(this).find("li").eq(eleindex).addClass("sib")
          }
      });
    	ele.nextAll().each(function(){
      		if($(this).index()<=pindex + 3){
          	$(this).find("li").eq(eleindex).addClass("sib")
          }
      });
    }
    
  	$("li").on("click",function(){
    
    	$(".sib").removeClass("sib");
      
    	var thisindex=$(this).index();
      var thisparent=$(this).parent("ul");
      var parentindex=thisparent.index();
      prevnextsib($(this),thisindex);
      topbottom(thisparent,parentindex,thisindex);
     
    });


})