Как узнать, где именно произошло 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 CharacterData принимается. В моем примере прямо сейчас $ observElements [1] изменяется от '35 .00 'до '25 .00'

Но как я могу знать, что эти изменения были в emelent $ observElements [1]? В полученном target.textContent i gon только текстовое значение.

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