Как добавить инкрементные значения в атрибут css с помощью Jquery

Question

В основном у меня есть серия DIV с различными значениями "top", "bottom" и "padding". "Нижний" и "отступ" я хочу 0 или исключить, но для "верхнего" мне нужно, чтобы каждый последующий DIV увеличивался на 10px, начиная с 0. Так что в основном получилось что-то вроде этого:

<div class="someclass" style="position:absolute;top:10px;bottom:5;padding:4;"> </div>
<div class="someclass" style="position:absolute;top:15px;bottom:10;padding:2;"> </div>
<div class="someclass" style="position:absolute;top:5px;bottom:5;padding:6;"> </div>

В ЭТОМ:

<div class="someclass" style="position:absolute;top:0px;bottom:0;padding:0;"> </div>
<div class="someclass" style="position:absolute;top:10px;bottom:0;padding:0;"> </div>
<div class="someclass" style="position:absolute;top:20px;bottom:0;padding:0;"> </div>

Не совсем уверен, что лучший способ обнулить другие свойства, но самая большая проблема заключалась в выяснении постепенного увеличения. Вот скрипка, с которой я работал, но она рекламирует +10 ко всем div вместо увеличения. скрипка

Answer 1

Может быть, что-то вроде этого:

$('.someclass').each(function(index, value) {
    $(this).css({
        'top': (index * 10) + 'px',
        'bottom': 0,
        'padding': 0
    });
});

Answer 2

Попробуй это:

 var x = document.getElementsByClassName("someClass");
 for(var i=0; i<x.length; i++){
    x[i].style.top = (i*10) + 'px';
  };

Answer 3

Если я правильно понимаю ожидаемые результаты, вы можете использовать индекс элемента для увеличения на:

$('.someclass').css('top', function(i, v) {
    return i*10 ;
});

DEMO