Question

我有一个表，在<tr>内的下拉列表中存在绝对定位问题。 div.wrapper没有多大帮助，因为它打破了布局。我通过增加顶部+ = 100找到了一个解决方案，但我不知道如何逐个增加每个元素的这个值相同的值

所以，我需要class =“services”id =“1”才能成为top：100;并且id =“2”为top：200; ... id = 3：300px，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' });
});

希望它有所帮助。

Jquery - 如何为行中的每个元素增加top属性的值

1 个答案: