jQuery/Javascript 获取多个元素的 classes 以显示具有此 class 的元素

Question

我正在为 jQuery 实时搜索而苦苦挣扎。

首先，使用以下代码的实时搜索更新有效。

  //live search function
  function live_search(list) {
    $("#search")
      .change( function () {
        //getting search value
        var searchtext = $(this).val();
        if(searchtext) {
          //finding If content matches with searck keyword
          $matches = $(list).find('a:Contains(' + searchtext + ')').parent();
          //hiding non matching lists
          $('li', list).not($matches).slideUp();
          //showing matching lists
          $matches.slideDown();

        } else {
          //if search keyword is empty then display all the lists
          $(list).find("li").slideDown(200);
        }
        return false;
      })
    .keyup( function () {
        $(this).change();
    });
  }

问题是我的列表是按字母顺序排列的，每个字母都包含一个 header：

<ul class="begrippen_list leftList col-sm-12 col-md-6">
   <li class="header a">A</li>
   <li class="a">
      <a href="#">All</a>
   </li>
   <li class="a">
      <a href="#">Auto</a>
   </li>
   <li class="header b">B</li>
   <li class="b">
      <a href="#">Balls</a>
   </li>
   <li class="b">
      <a href="#">Bus</a>
   </li>
</ul>

现在问题来了：当我在输入中输入 au 时，jQuery 只显示 list-item 和 "Auto"，但我还想要 header 和要显示的 class a (class of li)。当我只输入带有 class "a" 和 class "b" 的 headers 时，必须显示。

我认为检查所有 $matches 的 class 并显示 li.header 和 $matches 的 classes 可能是解决方案，但无法使其工作。

干杯！

Answer 1

可以遍历找到$matches的'header'元素，向上滑动排除

var $header = $matches.prevAll('li.header');

//hiding non matching lists excluding matches heare
$('li', list).not($matches).not($header).slideUp();

jQuery/Javascript 获取多个元素的 classes 以显示具有此 class 的元素

jQuery/Javascript get classes of multiple elements to show an element with this class

javascript

jquery

if-statement

class

jquery-selectors