javascript - 如何在多个节点上使用 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);
});