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

Posted

技术标签:

【中文标题】jQuery/Javascript 获取多个元素的类以显示具有此类的元素【英文标题】:jQuery/Javascript get classes of multiple elements to show an element with this class 【发布时间】:2015-09-06 21:56:40 【问题描述】:

我正在为 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();
    );
  

问题是我的列表是按字母顺序排列的,并且每个字母都包含一个标题:

<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 只显示带有“Auto”的列表项,但我还希望显示带有 a 类(li 类)的标题。当我只键入 a 时,必须显示具有“a”类和“b”类的标题。

我认为检查他们的类的所有 $matches 并显示带有 $matches 类的 li.header 可能是解决方案,但无法使其正常工作。

干杯!

【问题讨论】:

【参考方案1】:

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

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

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

【讨论】:

几乎 :) 现在它还显示没有匹配的 .headers。我认为必须检查 header 是否与 match 具有相同的类。 @TomTe,用var $header = $matches.prevAll('li.header');尝试一次

以上是关于jQuery/Javascript 获取多个元素的类以显示具有此类的元素的主要内容,如果未能解决你的问题,请参考以下文章

jquery ,Javascript 获取滚动条高度和位置, 元素距页头高度

jquery javascript的事件函数 如何传入多个元素值/或类名,比如hover()事件函数传入2个以上元素class名

如何在jQuery中获取div元素的边界框

jQuery 获取除子元素 X 之外的子元素的 HTML

jQuery(javascript)无法跨域,怎么解决?是想获取iframe的框架里面的东西!!

JQuery javascript实现父子页面相互调用