如何实现仅在desc区域搜索并隐藏完整元素的jQuery过滤器

开发者阿泽

2026-8-7

jQuery搜索过滤器功能修复方案

问题说明

现有基于jQuery开发的搜索过滤器存在两个功能缺陷：

使用选择器#elenco .cliente .desc时，仅会隐藏不匹配输入文本的.desc模块，无法隐藏整个客户条目
使用选择器#elenco .cliente时，会在包含.funzioni的整个.cliente元素范围内搜索文本，导致误隐藏包含匹配文本但不在.desc区域的条目

需求：仅在.desc区域内匹配输入文本，当匹配失败时隐藏整个.cliente元素。

原实现代码

原JavaScript代码

$(document).ready(function(){
    $("#sito").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $("#elenco .cliente ").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        console.log(this)
      });
    });
});

核心HTML结构

<div id="elenco">
  <div class="cliente" value="PROD">
    cliente
    <div class="desc">scommettendo prod <br><img src=""></div>
    <div class="funzioni"> <!-- 功能按钮等内容 --></div>
  </div>
</div>

修复后的代码

$(document).ready(function(){
    $("#sito").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $("#elenco .cliente .desc").filter(function() {
        // 基于当前.desc的文本匹配结果，控制其父元素.cliente的显示/隐藏
        $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });
});