Question

在搜索完成后，我无法确定如何从以下列表中删除标题。如果ul容器（zebra-list）中没有结果，我想删除之前的标题。

E.g。如果没有找到书籍，则隐藏书籍部分标题//如果没有找到期刊，则会隐藏期刊部分标题。

      书部分标题

2008 Book DVX

2007 Book 400 DVX

2006 Book 400 DVX

    期刊栏目标题
2005 Journal DS 650

2004 Journal DS 650

2003 Journal DS 650

2002 Journal DS 650

$(document).ready(function(){
    $('#txtList').on('keyup', function () {
        var value = this.value;
        $('.zebra-list li').hide().each(function () {
            if ($(this).text().search(value) > -1) {
                $(this).prevAll('.header').first().add(this).show();
            }
        });
    });
});

我有以下jsfiddle来显示问题。正如您所看到的，在搜索空白列表之后，标题仍然存在。如果搜索中没有显示任何项目，我想删除标题。

Js FIddle list with headers outside ul tag

Answer 1

我会这样做（以下js中的评论）：

＆＃13;

 $(document).ready(function() {
   var allLi = $('.zebra-list li'),
     headings = $('.small-heading');   // cache vars for better performance

   $('#txtList').on('keyup', function() {
     var value = this.value;

     headings.hide(); // hide everything on keyup
     allLi.hide().each(function() {
       var li = $(this);
       if (li.text().search(value) > -1) {
         li.show();  // show current li
         li.parent().prev('.small-heading').show();  // show current li  heading (which is the previous small-heading of the parent ul)
       }
     });
   });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='txtList' />
<h6 class="attention
 small-heading"><i class="fa fa-caret-down" style="color:#666;"> </i>
 Book Section Title</h6> 
<ul class="zebra-list fitment-padding">
  <li>2008 Book DVX</li>
  <li>2007 Book 400 DVX</li>
  <li>2006 Book 400 DVX</li>
</ul>
<h6 class="attention small-heading"><i class="fa fa-caret-down" style="color:#666;"> </i> Journal Section Title</h6> 
<ul class="zebra-list fitment-padding">
  <li>2005 Journal DS 650</li>
  <li>2004 Journal DS 650</li>
  <li>2003 Journal DS 650</li>
  <li>2002 Journal DS 650</li>
</ul>

＆＃13;

如何在使用搜索/过滤器时将标题隐藏在列表之外，并且在jQuery中找不到结果？

1 个答案: