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

Posted 2023-02-19

【中文标题】如何在多个节点上使用 MutationObserver？

【英文标题】：How can I use MutationObserver on multiple nodes?

【发布时间】：2017-10-10 20:30:24

【问题描述】：

以下代码允许我在单个节点上监听类更改：

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？

【参考方案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);
);

【讨论】：

OP 如何在MutationObserver() 实例上调用.disconnect()？

【参考方案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();