使用 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>

    </ul>

</div>

我尝试过以下方法但没有成功

<script>

$(document).ready(function() {

    $("#zz13_idPDPQuickLaunch *:contains('Benefits HIDDEN')").hide ();

});

</script> 

Answer 1

$('.menu-item-text').each(function() {&nbsp; this.textContent.trim() === 'Benefits HIDDEN' && $(this).closest('li').hide();});<div class="noindex ms-core-listMenu-verticalBox" id="zz13_idPDPQuickLaunch">&nbsp; <ul class="root ms-core-listMenu-root static" id="zz14_RootAspMenu">&nbsp; &nbsp; <li class="static">&nbsp; &nbsp; &nbsp; <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/">&nbsp; &nbsp; &nbsp; &nbsp; <span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Defra Benefits Dev</span></span>&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; <ul class="static">&nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </li>&nbsp; &nbsp; <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>&nbsp; </ul></div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

由于许多元素都包含该文本（不仅仅是span它所在的元素，还有 the&nbsp;liis&nbsp;spanin、itsul等，甚至#zz13_idPDPQuickLaunch元素本身），因此您必须更加具体地选择您的选择器。理想情况下，向要隐藏的最里面的元素添加一个类或其他内容。但你也可以从结构上做到这一点。例如，如果您想隐藏lis：$(document).ready(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$("#zz13_idPDPQuickLaunch&nbsp;li&nbsp;ul&nbsp;li.static:contains('Benefits&nbsp;HIDDEN')").hide&nbsp;(); });实例：$(document).ready(function() {&nbsp; &nbsp; $("#zz13_idPDPQuickLaunch li ul li.static:contains('Benefits HIDDEN')").hide ();});<div class=" noindex ms-core-listMenu-verticalBox" id="zz13_idPDPQuickLaunch">&nbsp; &nbsp; <ul class="root ms-core-listMenu-root static" id="zz14_RootAspMenu">&nbsp; &nbsp; &nbsp; &nbsp; <li class="static">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Defra Benefits Dev</span></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="static">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; </ul></div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>这就是说，您只想隐藏包含该文本的元素，前提是它们是 #zz13_idPDPQuickLaunch` 元素内的a 内的类li的元素。staticulli

Answer 3

您需要循环每个“li”项目并首先检查其中的文本。尝试这个：$(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var menu_items = $("#zz14_RootAspMenu").find("li");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; menu_items.each(function(idx,el){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var current_text = $(el).find('.menu-item-text').text();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(current_text == "Benefits HIDDEN"){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; });