Mutation Observer 只获取特定内容

Question

我有以下结构：

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

现在我只想获取节点，如果 INSIDE $('.col') 包含 class "block" 的 div，例如：

是的：

$('.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 ,ethod
删除 for，添加 forEach

我通过以下方式在 mutation.addedNodes NodeList 中添加了对 .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>'));

});

Mutation Observer 只获取特定内容

Mutation Observer only get specific content

javascript

jquery

mutation-observers