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

Question

我已经应用 mutationobserver 来确定元素 (.wq_singleResultWrapper) 中的 class 包含，因此将另一个 class 添加到不同的元素 (#prizeentry)

我正在使用的代码本质上是一个 "personality" 测验，最后有 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 中包含 class 会触发下面的 addClass div（如前所述，这仅在第一个 div 包含 class 时有效。

<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，因为我无法访问添加 class 包含的 jquery。

Answer 1

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

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

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

Fire jquery based on mutation on same class with multiple instances

javascript

jquery

mutation-observers