基于具有多个实例的同一类上的突变触发jquery

Question

我已应用突变观察器来确定元素中包含的类 (.wq_singleResultWrapper)，因此将另一个类添加到不同的元素 (#prizeentry)

我正在使用的代码本质上是一个“个性”测验，最后有 4 个结果。每个都在一个包装器 (.wq_singleResultWrapper) 中。

如果结果是 jquery 处理良好的第一个结果。但是，如果显示任何其他结果，则不会起作用。

var $div = document.getElementsByClassName(
    "wq_singleResultWrapper"
);

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName === "class") {
      var attributeValue = $(mutation.target).prop(mutation.attributeName);
      $('#prizeentry').addClass("visable");
    }
  });
});

observer.observe($div[0], {
  attributes: true
});

所以下面是以下预期结果： 如您所见，第二个 div 上的类包含将触发下面 div 中的 addClass（如前所述，这仅在第一个 div 具有类包含。

<div class="wq_singleResultWrapper"></div>
<div class="wq_singleResultWrapper result"></div>
<div class="wq_singleResultWrapper"></div>
<div class="wq_singleResultWrapper"></div>
<div id="prizeentry" class="visable"></div>

看下面的例子 https://jsfiddle.net/2d8hb3n0/23/

我正在使用突变观察器，因为我无权访问添加类包含的 jquery。

Answer 1

第一个结果有效，因为只观察到$div[0]。 $div 包含所有结果，所以 iterate $div 应该可以工作。

Array.from($div).forEach((div) => {
  observer.observe(div, {
    attributes: true, 
    subtree: true, 
    childList: true
  });
})