Mutation Observer仅获取特定内容 [英] Mutation Observer only get specific content

问题描述

我有以下结构：

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

现在我想只有INSIDE $（'。col'）才能获得节点阻止包含如下：

Now I want to get the nodes ONLY if INSIDE $('.col') a div of class "block" is included like:

这是：是

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

但是没有这个：

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

我的观察者看起来像这样：

my Observer looks like this:

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

我在镀铬扩展程序中，但这不应该真正重要

I am inside a chrome extension, but that should not really matter

推荐答案

修改你的代码：

• $ （'。col'）[1] .append 抛出一个TypeError，因为你在DOM Node上使用jQuery函数，使用 eq ，ethod


• 删除 ，添加 forEach

• $('.col')[1].append throw a TypeError, because you use jQuery function on DOM Node, use eq ,ethod
• Remove for, add forEach

我在 mutation.addedNodes .block 元素的检查> NodeList通过
addedNode.classList.contains（'block'）

I added the check for .block element in mutation.addedNodes NodeList via addedNode.classList.contains('block')

我的代码：

$(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>'));
​
});

这篇关于Mutation Observer仅获取特定内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！