1

私は次の構造を持っています：

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

INSIDE $('.col') クラス「ブロック」の 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        
    });

私はクロム拡張機能の中にいますが、それは実際には問題ではありません

4

1 に答える 1

4

コードを変更しました:

  • $('.col')[1].appendeqTypeError をスローします。DOM Node で jQuery 関数を使用するため、method を使用します。
  • 削除for、追加forEach

NodeList の.block要素のチェックを追加しましたmutation.addedNodesaddedNode.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>'));
​
});
于 2015-01-07T21:44:34.157 に答える