[英]How can I use MutationObserver on multiple nodes?
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? 例如,如果我有一个div网格,并且右边框上的每个div都有一个右边框,我怎样才能听取每个div的变化? 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?
是否可以在上面的代码中的某个地方使用for循环,以一类右边界为目标的每个div?
You can use jQuery's each
method to iterate over all matching DOM nodes and observe its mutations. 您可以使用jQuery的
each
方法迭代所有匹配的DOM节点并观察其突变。 The code is almost what you already have - notice that target = this
which is how each node is targeted. 代码几乎就是你已经拥有的 - 请注意
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);
});
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. 您可以使用
.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)
});
Storing of instances of MutationObserver
is for purpose of calling .disconnect()
on a specific MutationObserver
instance if needed; 存储
MutationObserver
的实例是为了在需要时调用特定MutationObserver
实例上的.disconnect()
; 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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.