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

您可以使用.right-border迭代.each()元素，调用函数为每个元素创建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的实例是为了在需要时调用特定.disconnect()实例上的MutationObserver;例如

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？

1 个答案: