5 
 <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');
})

直播：http : //jsbin.com/ibofis/1/edit

这工作正常，但我想为这个 addClass 添加 3 个下一个元素。

例如，如果我点击c那么 class .red 应该添加：c，d，e和f。

我怎样才能做到？

4

8 回答 8

10

试试这个：

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

于 2012-11-08T14:28:13.503 回答
6

将此添加到底部，在该$(this).addClass('red');行之后：

$(this).closest('tr').nextAll(':lt(3)').find('div').addClass('red');
于 2012-11-08T14:27:36.717 回答
2 
$('.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;
    }
  });
});
于 2012-11-08T14:35:18.960 回答
2

您可以使用So 使用.nextAll()和过滤对象.slice() 来切换当前和下 3 个项目的 .red 类：

这会将 .red 类添加到TR. 

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

jsBIN

这会将 .red 类添加到DIV

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

jsBIN

其中slice(0 = index, 3 = length)，IE 从第一个对象开始，限制为 3 个对象。

于 2012-11-08T14:35:40.473 回答
2

这应该可以解决问题：

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

原谅格式！

于 2012-11-08T14:36:16.603 回答
2 
$e =  $('.click');

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

获取单击元素的索引并使用.slice获取正确的子集。

于 2012-11-08T14:44:36.123 回答
2

在 div 示例中添加 id：a div 的 id 为 1，B div 的 id 为 2，依此类推

然后你可以更新你的js如下

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

希望它有所帮助

于 2012-11-08T14:58:26.180 回答
1

试试这个。如果您想将更改切换addClass为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");}
             }
          }
      }

});
于 2012-11-08T14:30:59.677 回答