[英]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')類“ 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
我通過addedNode.classList.contains('block')
在mutation.addedNodes
NodeList中添加了對.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>'));
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.