我有以下结构:
<div class="wrapper">
<div class="col">left</div>
<div class="col">middle</div>
<div class="col">right</div>
</div>
现在我只想在 $('.col') 内部包含“block”类的 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 Node 上使用 jQuery 函数,使用eq
,ethod- 删除
for
,添加forEach
我通过以下方式在 mutation.addedNodes
NodeList 中添加了对 .block
元素的检查
addedNode.classList.contains('block')
My code :
$(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>'));
});
关于javascript - Mutation Observer 只获取特定内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27828917/