如何在多个节点上使用MutationObserver？

Question

以下代码使我可以侦听单个节点上的类更改：

var target = $(".right-border")[0]

var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(“Change”)
  });
  });

  var config = { attributes: true, childList: true, characterData: true };

 observer.observe(target, config);

例如，如果我有一个div网格，则右边界上的每个div都有一类右边界，我该如何侦听每个div的变化？我知道我可以创建多个变量：

var target2 = $(".right-border")[1]
var target3 = $(".right-border")[2]

但是，有没有更有效的选择每个节点的方法？是否有可能在上述代码中的某处使用for循环，该循环以一类右边界定位每个div？

Answer 1

您可以使用 jQuery 的each方法遍历所有匹配的 DOM 节点并观察其变化。代码几乎就是您已经拥有的代码 - 请注意target = this每个节点的定位方式。

var config = { attributes: true, childList: true, characterData: true };

$(".right-border").each(function () {
  var target = this;
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      console.log("Change")
    });
  });

  observer.observe(target, config);
});