2015-06-26 2 views
2

Использование 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> 

любые предложения?

+0

ли вы имеете в виду, что вы хотите, чтобы скрыть элементы, которые содержат «страницы фирмы» 'Ā' элемент, или' li' элементы, которые имеют 'арию-label', содержащее слово' COMPANY '? –

+0

Элементы, имеющие арию-марку COMPANY – fishera

+0

Я добавил вам ответ. –

ответ

1

Вы можете использовать filter(), чтобы скрыть все элементы, которые имеют aria-label, который содержит COMPANY. Попробуйте это:

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

Можете ли вы также показать, как фильтровать как элементы компании, так и ветки? – fishera

+0

Чтобы фильтровать ветвь, просто измените строку, которую вы передаете функции 'indexOf()'. –

+0

'$ (this) .closest ('ul'). Find ('li'). Filter (" [aria-label * = BRANCH], [aria-label * = COMPANY] "). Hide();' this решение - еще один вариант – fishera

2

Вы можете использовать псевдо-селектор :contains.

Выбрать все элементы, содержащие указанный текст.

Смотрите комментарии встроенный в коде:

// 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

Смежные вопросы