[Dilettante_Pro]

Аналогичный принцип - другая реализация

<ul>
    <li class="slonik">1</li>
    <li class="begemotik">2</li>
    <li class="begemotik">3</li>
    <li class="begemotik">4</li>
    <li class="slonik">5</li>
    <li class="slonik">6</li>
    <li class="slonik">7</li>
    <li class="begemotik">8</li>
    <li class="begemotik">9</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$('li.begemotik').click(function(){
  $('li').css( "color", "black" );
   var sb = $(this).prev('li.begemotik');
   while (sb.index() >= 0){
        sb.css( "color", "red" );
        sb = sb.prev('li.begemotik');
   }
   sb = $(this).next('li.begemotik');
   while (sb.index() >= 0){
        sb.css( "color", "red" );
        sb = sb.next('li.begemotik');
   }
});
</script>