如何隱藏沒有ID或類的附加li元素

Question

如何隱藏沒有id或class的附加li元素

這是我的代碼。

<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附加到我的頁面中的。

Answer 1

$(selector).each(function(index,element))

獲取li的數量，使用索引進行查找。 僅作為示例：

if(index===5)
    element.hide();

Answer 2

這是答案。 您只是不需要每個循環。

碼

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>

<form action="" method="post" id="blog-node-form">
    <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> 
</form>

<script>
    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();
</script>

Answer 3

您需要MutationObserver ，在代碼段中，我已使用setTimeout通過$.ajax()操作動態模擬ul追加。

 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>