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

Question

我已经应用了mutationobserver来确定元素中包含的类(.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/

我正在使用mutationobserver，因为我无权访问添加类包含的jquery。

Answer 1

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

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