如何更精准地过滤元素？ jquery

Question

当我在过滤器中输入某些内容时，例如字母 "B"，结果会显示

divs

class="item" ； 球、恐龙“蓝色”和机器人。

我想知道如何让过滤器忽略

span

class="tag" 里面的内容，只在

p

class="name" 内部搜索，这样最终结果就只有

divs

class= “项目”与； 球和机器人

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

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

<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>

Answer 1

当您查找文本时，您可以增加搜索的特异性，以仅搜索具有名称类的元素：

$(this).toggle($(this).find(".name").text().toLowerCase().indexOf(value) > -1)

我向元素添加了 .find() 调用，这会将 .text() 调用的范围缩小到仅具有名称 class 的元素。