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

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

但在处理一个子类之后，它不会处理rest子类。我想我们只能在特定的节点上创建对象。那么，如何在创建时检测所有这些节点以使用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)
});