用 div / class 隐藏 li 项目

Question

我正在尝试在快速启动菜单中隐藏项目（li？），其中显示“隐藏的好处”，HTML 是；

<div class=" noindex ms-core-listMenu-verticalBox" id="zz13_idPDPQuickLaunch">
    <ul class="root ms-core-listMenu-root static" id="zz14_RootAspMenu">
        <li class="static">
            <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/">
                <span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Defra Benefits Dev</span></span>
            </a>
            <ul class="static">
                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Project Information</span></span></a></li>
                <li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits</span><span class="ms-hidden">Currently selected</span></span></a></li>
                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits HIDDEN</span></span></a></li>
                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits HIDDEN</span></span></a></li>
            </ul>
        </li>
        <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="javascript:PDPInfrastructure.NavigateWSSPage(0,true)"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Project Site</span></span></a></li>
    </ul>
</div>

我尝试了以下没有运气

<script>
$(document).ready(function() {
    $("#zz13_idPDPQuickLaunch *:contains('Benefits HIDDEN')").hide ();
});
</script> 

Answer 1

$('.menu-item-text').each(function() {
  this.textContent.trim() === 'Benefits HIDDEN' && $(this).closest('li').hide();
});

<div class="noindex ms-core-listMenu-verticalBox" id="zz13_idPDPQuickLaunch">
  <ul class="root ms-core-listMenu-root static" id="zz14_RootAspMenu">
    <li class="static">
      <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/">
        <span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Defra Benefits Dev</span></span>
      </a>
      <ul class="static">
        <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Project Information</span></span></a></li>
        <li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits</span><span class="ms-hidden">Currently selected</span></span></a></li>
        <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits HIDDEN</span></span></a></li>
        <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits HIDDEN</span></span></a></li>
      </ul>
    </li>
    <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="javascript:PDPInfrastructure.NavigateWSSPage(0,true)"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Project Site</span></span></a></li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

由于许多元素都包含该文本（不仅仅是它所在的 span 元素，还有 li 所在的 span、它的 ul 等等，等等 - 甚至是 #zz13_idPDPQuickLaunch 元素本身），您必须更具体地使用您的选择器。

理想情况下，向要隐藏的最里面的元素添加一个类或其他东西。但你也可以在结构上做到这一点。例如，如果你想隐藏lis：

$(document).ready(function() {
    $("#zz13_idPDPQuickLaunch li ul li.static:contains('Benefits HIDDEN')").hide ();
});

现场示例：

$(document).ready(function() {
    $("#zz13_idPDPQuickLaunch li ul li.static:contains('Benefits HIDDEN')").hide ();
});

<div class=" noindex ms-core-listMenu-verticalBox" id="zz13_idPDPQuickLaunch">
    <ul class="root ms-core-listMenu-root static" id="zz14_RootAspMenu">
        <li class="static">
            <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/">
                <span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Defra Benefits Dev</span></span>
            </a>
            <ul class="static">
                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Project Information</span></span></a></li>
                <li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits</span><span class="ms-hidden">Currently selected</span></span></a></li>
                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits HIDDEN</span></span></a></li>
                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits HIDDEN</span></span></a></li>
            </ul>
        </li>
        <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="javascript:PDPInfrastructure.NavigateWSSPage(0,true)"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Project Site</span></span></a></li>
    </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这表示您只想隐藏包含该文本的元素如果它们是 li 元素，static 类位于 ul 内，li 位于 # 内zz13_idPDPQuickLaunch` 元素。

Answer 3

您需要循环每个“li”项目并首先检查其中的文本。试试这个：

$(function(){

            var menu_items = $("#zz14_RootAspMenu").find("li");
          menu_items.each(function(idx,el){
            var current_text = $(el).find('.menu-item-text').text();

            if(current_text == "Benefits HIDDEN"){
              $(this).hide();
            }
          })


        });