如何实现精准元素过滤？仅在指定类元素内搜索

问题根源在于你当前的代码会获取.item容器内的所有文本内容，包括.tag标签里的文字，所以输入「B」时会误匹配到带有blue标签的Dinosaur。要实现仅在<p class="name">元素内搜索，只需修改文本获取的范围：

修改JavaScript代码，将$(this).text()替换为$(this).find('.name').text()，这样就只会提取名称区域的文本进行匹配：

$("#filter").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    $("#box .item").filter(function () {
      // 仅获取.name元素内的文本进行匹配
      $(this).toggle($(this).find('.name').text().toLowerCase().indexOf(value) > -1)
    });
});

完整可运行代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input id="filter" type="text" placeholder="Filter..." autocomplete="off">
<div id="box">
  <div class="item">
    <img src="" alt="img.jpg">
    <p class="name">Radio</p>
    <span class="tag">red</span>
  </div>
  <div class="item">
    <img src="" alt="img.jpg">
    <p class="name">Ball</p>
    <span class="tag">red</span>
  </div>
  <div class="item">
    <img src="" alt="img.jpg">
    <p class="name">Dinosaur</p>
    <span class="tag">blue</span>
  </div>
  <div class="item">
    <img src="" alt="img.jpg">
    <p class="name">Robot</p>
    <span class="tag">blue</span>
  </div>
</div>

<style>
#box {
  width: 300px;
}
.item {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid;
}
.name {
  text-transform: uppercase;
}
.tag {
  background: silver;
  padding:2px 4px;
}
</style>

<script>
$("#filter").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    $("#box .item").filter(function () {
      $(this).toggle($(this).find('.name').text().toLowerCase().indexOf(value) > -1)
    });
});
</script>

现在输入「B」时，只会显示名称包含B的Ball和Robot，Dinosaur会因为名称无匹配被过滤，完全符合需求。

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