Question

我的dom中有一个父节点。当父节点中插入特定元素时，我必须调用一个方法（新插入的节点不是直接子节点，它的子树，可能存在于2/3级深度）。

我有一个单元素插入代码，按预期工作

var parentNode = jQuery('.parent-node');
var observer = new MutationObserver(function (mutations) {
    if (parentNode.find('.sub-class-1')[0] !== undefined) {
        //call method       
        this.disconnect();
    }
 }).observe(parentNode[0], {childList:true, subtree: true });

但我想为多个子元素创建执行回调。我通过在子类元素数组上使用forEach来尝试这个。

arr.forEach(function (ob) {
    new MutationObserver(function (mutations) {
        if (parentNode.find(ob.className)[0] != undefined) {
            //ob.callback()
            this.disconnect();
        }
    }).observe(parentNode[0], { attributes:false, childList: true, subtree: true });
});

但是在处理了一个子类之后，它不会处理其余的子类。我想我们只能在特定节点上的对象上创建。那么，如何在创建时检测所有这些节点以使用MutationObserver执行特定的回调，或者是否有更好的替代方法。

Answer 1

嗨，请试试这个，

var config = { attributes: true, childList: true, characterData: true };
var observers = [];
function createObserver(target, index) {
var observer = new MutationObserver(function(mutations) {
    var $this = this;
    mutations.forEach(function(mutation) {
        if (parentNode.find('.sub-class-1')[0] !== undefined) {     
            $this.disconnect();
        }else{
            observers.push($this);
        }
    });
});
observer.observe(target, config);
}
$('.parent-node').each(function(i, el) {
createObserver(el, i)
});

如何使用MutationObserver监视dom中不同级别的多个节点插入

1 个答案: