Javascript 仅针对数组中新添加的元素

我目前正在使用一个js脚本（tinymasonry），并成功地将新项目添加到网格中。这些项目有一个不透明度0类（op0），该类在加载时被删除

这在初始加载和调整所有元素的大小时都可以很好地工作，但我试图让这种淡入淡出效果也只在新推送的元素上发生。这就是我被卡住的地方

这是我的密码：

function TinyMasonry(el) {
  var self = this
  var columns = []

  function createColumns(n) {
    var width = 100 / n + "%"
    columns = []
    while (n--) {
      var column = document.createElement("div")
      column.style.width = width
      column.style.float = "left"
      el.appendChild(column)
      columns.push(column)
    }
  }

  function getShortest() {
    var shortest = columns[0]
    for (var i = columns.length; i--;) {
      if (columns[i].clientHeight <= shortest.clientHeight) {
        shortest = columns[i]
      }
    }
    return shortest
  }

  function layout(tested) {
    var width = tested.parentElement.clientWidth / tested.clientWidth
    var n = Math.min(42, Math.round(width)) || 1
    var child
    while (child = el.firstElementChild) {
      child.parentNode.removeChild(child)
    }
    el.style.overflow = "hidden"
    createColumns(n)
    self.items.forEach(function(item,index) {
      item.style.display = "block"
      item.style.width = "auto"
      item.style.visibility = ""
      getShortest().appendChild(item)
      setTimeout(function() {
        item.classList.remove('op0')
      }, (100 * (index + 1)));

    })
    el.style.minHeight = ""
  }

  self.update = function() {
    if (self.items[0]) {
      el.classList.add("tinyMasonryLoaded")
      if (columns[0]) {
        el.style.minHeight = el.clientHeight + "px"
      }
      var tested = self.items[0]
      tested.style.width = ""
      if (tested.parentNode && tested.parentNode.parentNode === el) {
        layout(tested)
      } else {
        el.appendChild(tested)
        setTimeout(layout.bind(0, tested))
      }
    }
  }

  self.items = [].slice.call(el.children)
  self.update()

  var resizer;
  var startWidth = window.innerWidth;

  function resizeTimeout() {
      clearTimeout(resizer);
      resizer = setTimeout(doneResizing, 100)
  } 

  function doneResizing() {
    var curWidth = window.innerWidth;
    var breakpoint = false;
      if ((startWidth >= 580 && curWidth < 580) || (startWidth <= 580 && curWidth > 580)) {
          breakpoint = true
      }
      else if ((startWidth >= 980 && curWidth < 980) || (startWidth <= 980 && curWidth > 980)) {
          breakpoint = true
      }
      if(breakpoint === true) {
          self.items.forEach(function(item,index) {
            item.classList.add('op0')
          })
          self.update()
      }
      startWidth = window.innerWidth;
  }

  window.addEventListener("resize", resizeTimeout)
}

if (typeof exports === "object") {
  module.exports = TinyMasonry
}

var masGridContainer = document.querySelector(".mas-grid");
var masGrid = new TinyMasonry(masGridContainer);

如果在更新函数的开头添加循环，例如：

self.items.forEach(function(item,index) {
        item.classList.add('op0')
    })

添加新项目时，所有项目上都会显示不透明度效果

在ajax响应后调用update（）fun时，如何使效果仅显示在新添加的项上

解决此问题的一种方法是添加对象，而不是仅仅添加项索引。此对象将包含item和Date对象。因此，通过比较日期对象，您将能够获得最新的条目

选项2基本上是创建一个临时列表，并将条目添加到一个新列表中，然后将它们组成一个并集，以获得公共条目，从而了解新条目 现在你知道3是新条目了

解决此问题的一种方法是添加对象，而不是仅仅添加项索引。此对象将包含item和Date对象。因此，通过比较日期对象，您将能够获得最新的条目

选项2基本上是创建一个临时列表，并将条目添加到一个新列表中，然后将它们组成一个并集，以获得公共条目，从而了解新条目

---

现在你知道3是新条目了

据我所知，您的代码和示例只是将通过ajax响应获得的元素推送到网格中。由于

push

总是将项目添加到数组的末尾，因此您只需记住上次添加的索引，例如：

var-arr=[1,2,3'，sun'，banana'，4'，foo']；
var lastKnownIndex=4；
//添加了所有元素
var加法=arr.slice（lastKnownIndex+1）；
//处理添加的元素
控制台日志（增补）；
//更新索引
lastKnownIndex=阵列长度-1就我所理解的代码和示例而言，您只是将通过ajax响应获得的元素推送到网格中。由于
push
总是将项目添加到数组的末尾，因此您只需记住上次添加的索引，例如：


var-arr=[1,2,3'，sun'，banana'，4'，foo']；
var lastKnownIndex=4；
//添加了所有元素
var加法=arr.slice（lastKnownIndex+1）；
//处理添加的元素
控制台日志（增补）；
//更新索引
lastKnownIndex=阵列长度-1你能提供一个在我的代码中实现的功能示例吗？你能提供一个在我的代码中实现的功能示例吗？仍然在寻找我的代码的正确实现。Arjun Rajagopalan的答案可能是正确的，但经过几次尝试后，我一直无法实现它。你能提供一个HTML结构的工作片段吗？仍在寻找我代码的正确实现。Arjun Rajagopalan的答案可能是正确的，但经过几次尝试后，我一直无法实现它。你能提供一个HTML结构的工作片段吗？非常感谢。我尝试过实现一些非常相似的东西，但没有切分数组，这就是为什么它一遍遍地应用样式。非常好，谢谢。我试图实现一些非常相似的东西，但没有切分数组，这就是为什么它一遍遍地应用样式。
self.items.forEach(function(item,index) {
        item.classList.add('op0')
    })

eg:

temp List 1 = [1,2]

List 1 = [1,2,3]