Как узнать, где именно произошел MutationRecord (несколько целей)?

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. В моем примере прямо сейчас $ наблюдаемые элементы [1] изменяются с '35,00' до '25,00'

Но как я могу узнать, что это изменение было в $ emelent $ наблюдаемых элементах [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;
}