突变观察者仅获取特定内容
Mutation Observer only get specific content
我有以下结构:
<div class="wrapper">
<div class="col">left</div>
<div class="col">middle</div>
<div class="col">right</div>
</div>
现在,只有在 $('.col') 中包含类"块"的div 时,我才想获取节点,例如:
是的:
$('.col')[1].append($('<div class="block">urgent</div>'));
但对此不行:
$('.col')[1].append($('<div class="different">dontcare</div>'));
我的观察者看起来像这样:
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
for (var i = 0; i < mutation.addedNodes.length; i++) {
console.log(mutation.addedNodes[i]);
}
});
});
observer.observe(document, {
childList: true,
subtree:true,
characterData:true,
attributes:true
});
我在 chrome 扩展名中,但这并不重要
修改了你的代码:
-
$('.col')[1].append
抛出一个 TypeError,因为你在 DOM 节点上使用 jQuery 函数,使用eq
,ethod - 删除
for
,添加forEach
我通过以下方式在 NodeList mutation.addedNodes
中添加了.block
元素的检查 addedNode.classList.contains('block')
我的代码:
$(function () {
'use strict';
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
[].slice.call(mutation.addedNodes).forEach(function (addedNode) {
if (addedNode.classList.contains('block')) {
console.log("I'm has a class block, whats next?");
}
});
});
});
observer.observe(document, {
childList: true,
subtree:true,
characterData:true,
attributes:true
});
//Yes
$('.col').eq(1).append($('<div class="block">urgent</div>'));
//No
$('.col').eq(1).append($('<div class="different">dontcare</div>'));
});
相关文章:
- 未激发路由的控制器属性上的观察者
- 将属性设置为未定义时未通知观察者
- 检测 DIV 的高度何时变化,而无需轮询或突变观察者
- JavaScript:为什么Addy's观察者模式
- 设置多个观察程序以触发动态事件的角度替代解决方案 - 优化的观察者模式
- 被动.js模式间接观察者报告相同的值
- 将$scope对象作为参数提供给$digest中的观察者背后的逻辑
- 取代了棱角分明的深度观察者
- 突变观察者尚未定义
- 突变观察者未能检测到元素's删除dom
- 手动调整元素大小;不要在Chrome中激发突变观察者
- 共同描述编译器和观察者
- 如何确保对观察者的订阅调用最初接收到最新的值
- 未捕获的类型错误:无法执行'观察'在'突变观察者':参数1不是'节点'
- 在jQuery数据表中使用AngularJS观察者的方法是什么
- nodejs:原子文件替换操作,只触发一次一些观察者
- 阵列突变而不触发特定的观察者
- 无限循环当观察父对象时,观察者不更新任何值
- 如何在订阅时获取观察者的“当前”值
- 突变观察者仅获取特定内容