单击按钮后隐藏元素

Question

使用 jquery，当我单击 Search from documents 时，我想隐藏所有 li 元素，这些元素的 aria-label 包含 COMPANY 在 vlaue .这是我的 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

Answer 2

您可以使用 filter() 隐藏所有具有包含 COMPANY 的 aria-label 的元素。试试这个：

$('#ui-id-111').on('click', function() {
    $(this).closest('ul').find('li').filter(function() {
        return $(this).attr('aria-label').indexOf('COMPANY') != -1;
    }).hide();
});

单击按钮后隐藏元素

Hide elements after clicking a button

html

javascript

jquery

event-handling