Question

如何隐藏没有id或类

的附加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。

使用ajax在我的页面中附加ul。

Answer 1

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

获取 li 的数量，使用 index 进行查找。仅举个例子：

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来模拟使用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>

如何隐藏没有id或class的上传li元素

3 个答案: