javascript - 单击按钮后隐藏元素

Question

使用jquery，当我点击Search from documents时我想隐藏全部li具有 aria-label 的元素其中包含 COMPANY在值(value)。这是我的 HTML:

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: none; top: 30px; left: 0px; width: 236px;">
    <li class="search-documents-btn ui-menu-item" aria-label=" Search from documents &amp;raquo;" id="ui-id-111" tabindex="-1">
        Search from documents »
    </li>
    <li class="search-category ui-menu-item" id="ui-id-112" tabindex="-1">
        Companies
    </li>
    <li aria-label="test" class="ui-menu-item" id="ui-id-113" tabindex="-1">

    </li>
    <li aria-label="test1" class="ui-menu-item" id="ui-id-114" tabindex="-1">

    </li>
    <li class="search-category ui-menu-item" id="ui-id-122" tabindex="-1">
        Branches
    </li>
    <li aria-label="test2" class="ui-menu-item" id="ui-id-127" tabindex="-1">

    </li>
    <li aria-label="test3" class="ui-menu-item" id="ui-id-128" tabindex="-1">

    </li>
</ul>

有什么建议吗？

Answer 1

您可以使用:contains伪选择器。

Select all elements that contain the specified text.

查看代码中的内嵌注释:

// On click of the button
$('#ui-id-111').on('click', function() {
    $('li:contains("Company")').hide();
    // Hide all the li's that are containing `Company` as their innerText
});

DEMO