Jquery - 行のすべての要素のトッププロパティの値を増やす方法

Question

テーブルがあり、ドロップダウンの絶対位置に問題があります（<tr>内）。 div.wrapperはレイアウトを壊すのであまり役に立ちません。私はトップ+ = 100を増やして解決策を見つけましたが、同じ値で次々にこの値を増やす方法はわかりません

だから私はclass = "services" id = "1"トップ：100;そして、id = "2" トップすべき：200; ... ID = 3：300ピクセル、ID = 4：400、など。

例：

<tr data-id="1"> 
    <td><i class="expand"></i>First</td> 
    <td>something</td> 
    <td>something</td> 
    <div class="services" id="1"> 
     <div class="tr"> 
      <div class="td">Service ID 1</div> 
      <div class="td">bla-bla-bla</div> 
     </div> 
    </div> 
</tr> 
<tr data-id="2"> 
    <td><i class="expand"></i>Second</td> 
    <td>something</td> 
    <td>something</td> 
    <div class="services" id="2"> 
     <div class="tr"> 
      <div class="td">Service ID 2</div> 
      <div class="td">bla-bla-bla</div> 
     </div> 
    </div> 
</tr> 

.services{ 
    display: table; 
    position: absolute; 
    top: 100px; 
} 

私はこれを試みたが、それそれはページあたり10の以上の元素

var row = $('tbody tr'); 

row.each(function(i){ 
    var first = $(this).find('.services'); 
    var second = row.eq(i + 1).find('.services'); 

    first.animate({top: '+=100px'}, 0); 
    second.animate({top: '+=200px'}, 0); 
}); 

Answer 1

になりますので、動作しません。あなたは、（彼らはすべてのあなたのポストに設けた構成を尊重します提供）ページ内のすべてのサービスを選択してみてください：

$('.services').each(function(index, elm) { 
    $(elm).animate({top: (100 * index) + 'px' }, 0); 
}); 

また、試みることができる：

$('.services').each(function(index, elm) { 
    $(elm).css({top: (100 * index) + 'px' }); 
}); 

あなたはまた、あなたの現在のコードを適応させることがあります。

var row = $('tbody').find('tr'); 

row.each(function(i){ 
    $(this).css({top: (100 * i) + 'px' }); 
}); 

それがお役に立てば幸いです。