How can I use MutationObserver on multiple nodes?

Question

The following code allows me to listen for class changes on a single node:

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

If I have a grid of divs, for example, and each div on the right border has a class of right-border, how can I listen for changes on each one? I know that I could create multiple variables:

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

But is there a more efficient way of selecting each node? Is it possible to use a for loop somewhere in the above code that targets each div with a class of right-border?

Answer 1

You can use jQuery's each method to iterate over all matching DOM nodes and observe its mutations. The code is almost what you already have - notice that target = this which is how each node is targeted.

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

You can iterate .right-border elements using .each(), call function to create MutationObserver for each element, store the instances of MutationObserver within an array of objects where index of element in collection references MutationObserver instance for that element.

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

Storing of instances of MutationObserver is for purpose of calling .disconnect() on a specific MutationObserver instance if needed; for example

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

observer.disconnect();

or

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

observer.pop().disconnect();