文本框过滤Div行时如何同时隐藏.rowSec与.rowCat类元素

修改后的完整JS代码 #

$(document).ready(function(){
  $('.search').on('keyup',function(){
    var searchTerm = $(this).val().toLowerCase();
    // 原有内容行匹配过滤逻辑
    $('#shopTbl div.contentrow').each(function(){
      var lineStr = $(this).text().toLowerCase();
      if(lineStr.indexOf(searchTerm) === -1){
        $(this).hide();
        $(".descexpand").hide();
      }else{
        $(this).show();
      }
    });
    // 新增分区/分类标题行显隐控制
    if(searchTerm.length > 0){
      // 有输入内容时隐藏两类标题行
      $('#shopTbl .rowSec, #shopTbl .rowCat').hide();
    }else{
      // 输入框清空时恢复标题行显示
      $('#shopTbl .rowSec, #shopTbl .rowCat').show();
    }
  });
});

逻辑说明 #

1. 保留原有内容行的过滤匹配逻辑不变
2. 在内容行过滤完成后新增判断：读取输入框搜索词的长度
   • 搜索词长度≥1时，直接隐藏列表内所有.rowSec、.rowCat类的标题行，优先级高于原有过滤逻辑的显隐结果
   • 搜索词长度为0（输入框清空）时，恢复两类标题行的显示
3. 选择器限定了仅操作#shopTbl容器内的元素，不会影响页面其他位置的同类样式元素

内容的提问来源于stack exchange，提问作者Jabbamonkey