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?
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?
Share Improve this question edited May 11, 2017 at 17:52 Dragomok 6223 gold badges12 silver badges30 bronze badges asked May 11, 2017 at 17:33 Pat MellonPat Mellon 3602 gold badges5 silver badges12 bronze badges2 Answers
Reset to default 11You 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);
});
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();