如何更精准地过滤元素？

Question

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

<div class="item"

； 球、恐龙“蓝色”和机器人。

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

<span class="tag"

里面的内容，只在

<p class="name"

内部搜索，这样最终的结果就只有

<divs class="item"

； 球和机器人

$("#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 的元素。

Answer 2

• 请勿使用

  "keydown"

  事件名称。输入元素还应该响应，即：复制/粘贴操作等，不一定来自键盘。相反，请使用

  "input"

  事件
• 如果没有什么可以

  过滤

  ，请勿使用.filter()。使用 jQuery 的

  .each()

  来代替
• 使用 this

   或 

  .name

   来定位 

  $(".name", this)

   的 

  $(this).find(".name")
孩子

示例：

$("#filter").on("input", function () {
  const value = $(this).val().trim().toLowerCase();
  $("#box .item").each(function () {
    const match = $(".name", this).text().toLowerCase().indexOf(value) > -1;
    $(this).toggle(match);
  });
});

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>