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

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?

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

• javascript
• jquery
• html
• css

• 1 $(this).closest('tr').andSelf().nextAll(':lt(3)').find('div').addClass('class'); – adeneo Commented Nov 8, 2012 at 14:29

8 Answers 8

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

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

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

$('.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;
    }
  });
});

This should do the trick:

$('.click').click(function(){

var thisIndex = $(this).closest("tr")[0].rowIndex;
  for(i=1; i<4; i++){
$("table").find('tr:eq('+(thisIndex+i)+')').addClass('red');
  $(this).addClass('red');
  }
});

Excuse the formatting!

$e =  $('.click');

$e.click(function(){
   $i = $e.index($(this));
   $e.slice($i,$i+4).toggleClass('red');
});

Get the index of clicked element and use .slice to get the correct subset.

You can use .nextAll() and filter the objects using .slice() So to toggle the .red class for the current and next 3 items:

This adds the .red class to the TR.

$(this).closest("tr").toggleClass('red').nextAll().slice(0,3).toggleClass('red');

jsBIN

This adds the .red class to the DIV

$(this).toggleClass('red').closest("tr").nextAll().slice(0,3).each(function() {
    $(this).find(".click").toggleClass("red");
  });
});

jsBIN

Where slice(0 = index, 3 = length), I.E. start from the 1st object and limit to 3 objects.

add id's to the divs example: a div has id 1, B div has id 2 and so on

then you can update ur js as following

$('.click').click(function(){
    $(this).addClass('red');
  var id = $(this).attr('id');
  for(i=0;i<4;i++)
  {
     var ids = '#' + id;  
   $(ids).addClass('red');
    id++;
     }
});

Hope it helped

try this. if you want to toggle change addClass to toggleClass

$('.click').click(function(e){
  var clicks=$('.click');
  for(var i=0;i<clicks.length;i++)
      {
        if ($(this).text()==$(clicks[i]).text())
          {
             for(j=i;j<i+4;j++)
             {
               if ($(clicks[j])!=undefined) {
               $(clicks[j]).addClass("red");}
             }
          }
      }

});