我正在寻找一种方法来监视元素内动态填充（无页面重新加载）内容，以便我可以将类添加到另一个元素。
到目前为止我有这个：
HTML
<div class="message-container">
<div class="messages error"><span></span></div>
<div class="messages success"><span></span></div>
<div class="messages warning"><span></span></div>
<div class="messages warning"><span></span></div>
</div>
<div class="myDiv">...</div>
JS
$(document).ready(function() {
if($.trim($("div.messages.success span").html()) != '') {
$('.myDiv').addClass('.with-message');
}
});
我怎样才能拥有myDiv拥有with-message上课时有任何消息span是否有人居住？
请注意，它可以在不重新加载的情况下即时填充，或者在登陆页面时存在，或者通过重新加载进行填充。
您可以使用变异观察者 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver检测何时添加子项。
// select the target node
var target = document.querySelector(".messages.success");
// create an observer instance
var observer = new MutationObserver(function(mutations) {
document.querySelector(".myDiv").classList.toggle("active", mutations[0].addedNodes.length);
});
// configuration of the observer:
var config = {
childList: true
};
// pass in the target node, as well as the observer options
observer.observe(target, config);
// later, you can stop observing
//observer.disconnect();
window.setTimeout(function() {
var temp = document.createElement("div");
temp.innerHTML = "Hello";
document.querySelector(".messages.success").appendChild(temp);
}, 5000);
.active {
background-color: green;
}
<div class="message-container">
<div class="messages error"><span></span>
</div>
<div class="messages success"><span></span>
</div>
<div class="messages warning"><span></span>
</div>
<div class="messages warning"><span></span>
</div>
</div>
<div class="myDiv">...</div>
或者您可以轮询该元素并查看它是否有任何子元素
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
