javascript - 基于字符串搜索的简单 jquery 查找和显示 - 无法使其工作

Question

查询：

  //Jquery-JS search for actors and directors
  //Hide extra Actors
  $(".actor ul li").not($(".actor ul li").slice(0,11)).hide();
  //
  function find_and_unhide (keyword,container) {
    $(container+':contains("'+keyword+'")').show();
  }
  find_and_unhide("fra",".actor ul li");

html:

<div class="option-combo actor">
<h4>Actor →&lt;/h4>
<ul class="filter option-set" data-filter-group="actor">
<li><a href="#filter-actor-any" data-filter-value="" class="selected">Any</a></li>
<li><a href="#filter-actor-sandro" data-filter-value="sandro">Sandro</a></li>
<li><a href="#filter-actor-barbara" data-filter-value="barbara">Barbara</a></li>
<li><a href="#filter-actor-ku" data-filter-value="ku">Ku</a></li>
<li><a href="#filter-actor-cool" data-filter-value="cool">Cool</a></li>
<li><a href="#filter-actor-aid" data-filter-value="aid">Aid</a></li>
<li><a href="#filter-actor-leo" data-filter-value="leo">Leo</a></li>
<li><a href="#filter-actor-john" data-filter-value="john">John</a></li>
<li><a href="#filter-actor-kvara" data-filter-value="kvara">Kvara</a></li>
<li><a href="#filter-actor-kuku" data-filter-value="kuku">Kuku</a></li>
<li><a href="#filter-actor-bubu" data-filter-value="bubu">Bubu</a></li>
<li style="display: none;"><a href="#filter-actor-fra" data-filter-value="fra">Fra</a></li>
</ul>
</div>

1. 查找和取消隐藏功能不起作用。
2. 我还想知道是否应该使用 data-filter-value 而不是 contains 来选择正确的 li。但是哪一个会更快？
3. 另外我如何实现模糊匹配？

Answer 1

我会做这样的事情来修复您的查找和取消隐藏功能：

function find_and_unhide (keyword,container) {
    $(container).find('[data-filter-value="' + keyword + '"]').show();
}

我绝对认为从长远来看，对数据属性的搜索会更快，并且更具可扩展性，但是，特别是因为您缩小了需要搜索的 DOM，我想无论哪种方式，性能差异都可以忽略不计。我个人认为使用 data 属性更干净。

不太了解模糊匹配，但也许这个问题会给你一个起点：获取最接近的字符串匹配