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

これは問題なく動作しますが、次の 3 つの要素にこの addClass を追加したいと思います。

たとえば、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

divの例にIDを追加します。divのIDは1、BのdivのIDは2などです。

次に、次のようにurjsを更新できます

$('.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 に答える
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

.nextAll()Soを使用してオブジェクトを使用およびフィルタリングし.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 に答える
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 に答える