javascript - 对每个元素应用不同的 CSS？

Question

我试图遍历具有特定类的父 ul 的 li 元素，并根据循环中的前一个元素:

$(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();
    });
});