突变观察员只能得到具体内容

Question

我有以下结构：

<div class="wrapper"> 
    <div class="col">left</div> 
    <div class="col">middle</div> 
    <div class="col">right</div> 
</div> 

现在我想要得到的节点只如果在$类‘块’的一个div包括像（“上校”）：

yes该：

$('.col')[1].append($('<div class="block">urgent</div>')); 

但没有找到：

$('.col')[1].append($('<div class="different">dontcare</div>')); 

我的观察是这样的：

var observer = new MutationObserver(function (mutations) { 
     mutations.forEach(function (mutation) { 
      for (var i = 0; i < mutation.addedNodes.length; i++) { 
        console.log(mutation.addedNodes[i]); 
       } 
      });    
     }); 

    observer.observe(document, { 
     childList: true, 
     subtree:true, 
     characterData:true, 
     attributes:true   
    }); 

我是一个Chrome扩展中，但是这不应该真正的问题

Answer 1

修改代码：

• $('.col')[1].append抛出一个TypeError，因为你用DOM节点上的jQuery函数，使用eq，方法
• 删除for，加入forEach

我mutation.addedNodes节点列表通过 添加的支票.block元素addedNode.classList.contains('block')

My code：

$(function() { 
​ 
    'use strict'; 

    var observer = new MutationObserver(function (mutations) { 
    mutations.forEach(function (mutation) { 
     [].slice.call(mutation.addedNodes).forEach(function (addedNode) { 
     if (addedNode.classList.contains('block')) { 
      console.log("I'm has a class block, whats next?"); 
     } 
     }); 
    });    
    }); 
​ 
    observer.observe(document, { 
    childList: true, 
    subtree:true, 
    characterData:true, 
    attributes:true   
    }); 
​ 
​ 
    //Yes 
    $('.col').eq(1).append($('<div class="block">urgent</div>')); 
​ 
    //No 
    $('.col').eq(1).append($('<div class="different">dontcare</div>')); 
​ 
});