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

Question

下面的代码允许我在单个节点上监听 class 变化：

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 都有一个 class 的右边框，我该如何监听变化在每个？我知道我可以创建多个变量：

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

但是有没有更有效的方法来选择每个节点？是否可以在上面代码中的某处使用 for 循环，将每个 div 与 class 的右边界作为目标？

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

Answer 2

您可以使用 .each() 迭代 .right-border 个元素，调用函数为每个元素创建 MutationObserver，将 MutationObserver 的实例存储在索引所在的对象数组中集合中的元素引用了该元素的 MutationObserver 个实例。

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

var observers = [];

function setObserver(target, index) {
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      console.log("Change")
    });
  });
  observer.observe(target, config);
  observers.push({[index]: observer});
}

$(".right-border").each(function(index, el) {
  setObserver(el, index)
});

存储 MutationObserver 的实例是为了在需要时在特定的 MutationObserver 实例上调用 .disconnect()；例如

var observer = observers.find(function(el) {
  return +Object.keys(el).pop() === 1
});

observer.disconnect();

或

var observer = observers.filter(function(el) {
  return +Object.keys(el).pop() === 1
});

observer.pop().disconnect();

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

How can I use MutationObserver on multiple nodes?

javascript

dom

mutation-observers