Jquery - 根据自定义属性隐藏LI，维护其他过滤器

Question

我需要一些帮助来实现这一点，因为我对jQuery / JavaScript一点都不擅长，这就是为什么我甚至不知道如何寻找答案：

我有这个HTML：

<input type="text" id="searchParameter">
<ul>
    <li data-sr-geolocation="USA, Miami" style="display:none;"></li>
    <li data-sr-geolocation="Brazil, Sao Pablo"></li>
    <li data-sr-geolocation="Canada, Quebec"></li>
</ul>

我需要根据自定义属性值隐藏li。

例如，如果在 searchParameter 上，我将＆＃34;加拿大，魁北克＆＃34;或者＆＃34;魁北克省＆＃34; （包含）隐藏所有其他人。

由于我已经应用了其他过滤器（某些已经隐藏了），我只需要显示包含该值但尚未被其他过滤器隐藏的过滤器，即使它们具有搜索到的值。

Answer 1

如果我已正确理解了问题，您可以选择可见的li元素，隐藏它们并显示匹配的元素，这样您的过滤就不会涉及已隐藏的元素：

$('li').not(':hidden')
       .hide()
       .filter('[data-sr-geolocation*="'+ searchParameter +'"]')
       .show();

Answer 2

只需使用CSS属性选择器。

$('li').hide();
$('li[data-sr-geolocation*="'+searchString+'"]').show();