当元素内存在特定值时，使用jQuery隐藏目标元素

我帮你梳理下原代码里的两个小问题，然后给出修正后的实现：

问题分析 #

1. 错误的jQuery方法：你用了$(this).child("div")，但jQuery里并没有child()这个方法，要获取当前元素的直接子元素div，应该用.children("div")，或者更精准的.find("> div")（只匹配直接子节点的div）。
2. 文本空格干扰：直接通过.text()获取的内容可能包含隐藏的空白字符（比如换行、空格），这会导致判断tileType == "None"失败，所以最好用.trim()去除首尾空白后再做判断。

修正后的代码 #

JavaScript 代码 #

$(document).ready(function() {
  $(".product-tile").each(function() {
    // 去除h3文本的首尾空白，避免空格干扰判断
    const tileType = $(this).find("h3").text().trim();
    if (tileType === "None") {
      // 使用children获取直接子元素div并隐藏
      $(this).children("div").hide();
      // 或者用 $(this).find("> div").hide(); 效果一致
    }
  });
});

完整HTML示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-tile">
  <h3>Health</h3>
  <div><i>i Icon</i></div>
</div>
<div class="product-tile">
  <h3>Wealth</h3>
  <div><i>i Icon</i></div>
</div>
<div class="product-tile">
  <h3>None</h3>
  <div><i>i Icon</i></div>
</div>
<div class="product-tile">
  <h3>Others</h3>
  <div><i>i Icon</i></div>
</div>

这样修改后，第三个product-tile里的div就会被正确隐藏了，而且就算h3标签里的"None"前后有空格，也不会影响判断结果。

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