next 3 from this

Question

 <tr>
   <td><div class="click">a</div></td>
 </tr>
  <tr>
   <td><div class="click">b</div></td>
 </tr>
  <tr>
   <td><div class="click">c</div></td>
 </tr>
  <tr>
   <td><div class="click">d</div></td>
 </tr>
  <tr>
   <td><div class="click">e</div></td>
 </tr>
  <tr>
   <td><div class="click">f</div></td>
 </tr>
  <tr>
   <td><div class="click">g</div></td>
 </tr>
<tr>
   <td><div class="click">h</div></td>
 </tr>
<tr>
   <td><div class="click">i</div></td>
 </tr>
<tr>
   <td><div class="click">j</div></td>
 </tr>
<tr>
   <td><div class="click">k</div></td>
 </tr>
<tr>
   <td><div class="click">l</div></td>
 </tr><tr>
   <td><div class="click">m</div></td>
 </tr>
<tr>
   <td><div class="click">n</div></td>
 </tr>
<tr>
   <td><div class="click">o</div></td>
 </tr>  
</table> 

$('.click').click(function(){
    $(this).addClass('red');
})

LIVE: http://jsbin.com/ibofis/1/edit

this working ok, but i would like add for this addClass for 3 next elements.

For example if i click on c then class .red should add for: c, d, e and f.

How can i make it?

Answer 1

Try this:

$('.click').click(function(){
   var $this = $(this).closest('tr');
   $this.nextUntil().filter(':lt(3)').add($this).find('div').addClass('red');
});

http://jsbin.com/ibofis/2/edit

Answer 2

Add this to the bottom, after the $(this).addClass('red'); line:

$(this).closest('tr').nextAll(':lt(3)').find('div').addClass('red');

Answer 3

$('.click').click(function(){
    $(this).addClass('red');
  var counter = 0, clickedEl = this;
  $('.click').each(function(ind, el){
    if(counter-- > 0){
      $(el).addClass('red');
    }
    if(el == clickedEl){
      counter = 3;
    }
  });
});