Применить различные CSS к каждому элементу?

Question

Я пытаюсь Переберите li элементов родителя ul с определенным классом и назначить переменную маржу для каждого из них, в зависимости от высоты предыдущего элемента в петле:

$(function() { 
 
    var staticOffset = 66; 
 
    var previousHeight = null; // initialization 
 
    $(".timeline-tidy li").each(function() { 
 
    if (previousHeight) { // exclude the first element 
 
     var heightOffset = previousHeight - staticOffset; 
 
     this.css('margin-top', heightOffset * -1); // negative margin 
 
    } 
 
    previousHeight = this.height(); 
 
    }); 
 
});

Я, очевидно, делаю что-то неправильно. Не могли бы вы мне помочь?

Answer 1

Вы не ссылаетесь на this правильно в функции. Вам нужно обернуть его $(), чтобы превратить его в объект JQuery, как установить CSS и получить высоту ...

$(function() { 
    var staticOffset = 66; 
    var previousHeight = null; // initialization 
    $(".timeline-tidy li").each(function() { 
    if (previousHeight) { // exclude the first element 
     var heightOffset = previousHeight - staticOffset; 
     $(this).css('margin-top', heightOffset * -1); // negative margin 
    } 
    previousHeight = $(this).height(); 
    }); 
}); 

Однако, так как вы делаете это больше, чем когда-то я рекомендовал бы создавая местная ссылка на него, например ...

$(function() { 
    var staticOffset = 66; 
    var previousHeight = null; // initialization 
    $(".timeline-tidy li").each(function() { 
     var $this = $(this); 
     if (previousHeight) { // exclude the first element 
      var heightOffset = previousHeight - staticOffset; 
      $this.css('margin-top', heightOffset * -1); // negative margin 
     } 
     previousHeight = $this.height(); 
    }); 
});