Question

我试图观察一组元素。元素的数量可以是多种：从1到10。

$observedElements = document.querySelectorAll('em.price'); 
// in that time length will be 3.

// $observedElements[0]  is a   '<em class='price'>10.15</em>'
// $observedElements[1]  is a   '<em class='price'>35.00</em>'
// $observedElements[2]  is a   '<em class='price'>48.95</em>'

所以..

var observer = new MutationObserver(function(MutationRecord) {
    MutationRecord.forEach(function(MutationRecord) {
        if (MutationRecord.type == 'characterData')  {  
            console.log ('got it ... in elem. № ? ');   
            // which element is affected by this mutation? [0], [1] or [2] ?    
        };
    });
});

var observerConfig = { attributes: false, childList: true, characterData: true, subtree: true, };

for (var i = 0; i < $observedElements.length; i++) {
    observer.observe($observedElements[i], observerConfig);
};

当某个元素中的值发生变化时，会收到MutationRecord.type characterData。在我的例子中，现在$ observedElements [1]从'35 .00'变为'25 .00'

但是，我怎么知道这种变化是在emelent $ observedElements [1]？在收到的target.textContent中，我只使用文本值。

Answer 1

MutationRecord.target已指向已更改的项目，因此您可以使用

找到根目录

function findObserver(mutationRecord) {
  for (var i = 0; i < $observedElements.length; i++) {
    if ($observedElements[i].contains(mutationRecord.target)) {
      return $observedElements[i];
    }
  }
  return null;
}

如何知道MutationRecord究竟发生在哪里（多个目标）？

1 个答案: