如何隐藏li
没有id或class的附加元素
这是我的代码。
<form action="" method="post" id="blog-node-form">
<ul class="vertical-tabs-list">`enter code here`
<li>
<a href="#"><strong>Menu settings</strong></a>
</li>
<li>
<a href="#"><strong>URL path settings</strong></a>
</li>
<li>
<a href="#"><strong>Revision information</strong></a>
</li>
<li>
<a href="#"><strong>Authoring information</strong></a>
</li>
<li>
<a href="#"><strong>Publishing options</strong></a>
</li>
</ul>
</form>
jQuery("#blog-node-form").on('each','ul.vertical-tabs-list li',function(){
if(jQuery(this).find('strong:contains("Menu settings")').length>0 || jQuery(this).find('strong:contains("Authoring information")').length>0)
{
jQuery("#edit-menu").hide();
jQuery(this).hide();
}
});
在这里,我试图隐藏特定的内容li
。
该ul
使用ajax附加在我的页面中。
您需要MutationObserver,在代码段中,我已经使用它setTimeout
来模拟ul
动态使用$.ajax()
操作的附加。
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var list = document.querySelector('#blog-node-form');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList') {
jQuery("#blog-node-form ul.vertical-tabs-list li").find('strong:contains("Menu settings")').parent().parent().hide();
jQuery("#blog-node-form ul.vertical-tabs-list li").find('strong:contains("Authoring information")').parent().parent().hide();
}
});
});
observer.observe(list, {
attributes: true,
childList: true,
characterData: true
});
setTimeout(function() {
var data = '<ul class="vertical-tabs-list"> \
<li> <a href="#"><strong>Menu settings</strong></a> </li>\
<li> <a href="#"><strong>URL path settings</strong></a> </li> \
<li> <a href="#"><strong>Revision information</strong></a> </li> \
<li> <a href="#"><strong>Authoring information</strong></a> </li> \
<li> <a href="#"><strong>Publishing options</strong></a> </li> \
</ul> ';
jQuery("#blog-node-form").append(data)
}, 5000)
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<form action="" method="post" id="blog-node-form">
</form>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句