ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript – 如何在多个节点上使用MutationObserver?

2019-06-27 18:21:02  阅读:300  来源: 互联网

标签:javascript dom mutation-observers


以下代码允许我在单个节点上侦听类更改:

var target = $(".right-border")[0]

var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(“Change”)
  });
  });

  var config = { attributes: true, childList: true, characterData: true };

 observer.observe(target, config);

例如,如果我有一个div网格,并且右边框上的每个div都有一个右边框,我怎样才能听取每个div的变化?我知道我可以创建多个变量:

var target2 = $(".right-border")[1]
var target3 = $(".right-border")[2]

但是有更有效的方法来选择每个节点吗?是否可以在上面的代码中的某个地方使用for循环,以一类右边界为目标的每个div?

解决方法:

您可以使用jQuery的每个方法迭代所有匹配的DOM节点并观察其突变.代码几乎就是你已经拥有的 – 请注意target = this,这是每个节点的目标.

var config = { attributes: true, childList: true, characterData: true };

$(".right-border").each(function () {
  var target = this;
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      console.log("Change")
    });
  });

  observer.observe(target, config);
});

标签:javascript,dom,mutation-observers
来源: https://codeday.me/bug/20190627/1307373.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有