如何基于IF条件批量修改元素CSS？批量隐藏符合条件的li元素

嘿，我明白你遇到的问题了——你的代码只对第一个元素生效，是因为querySelector()只会返回匹配到的第一个元素，没法处理所有符合条件的.item。要批量处理所有目标元素，咱们得调整代码逻辑，遍历每个元素并逐个检查价格条件：

修改后的代码 #

// 获取所有需要处理的.item元素（对应你的li标签）
const allItems = document.querySelectorAll(".item");

// 遍历每个元素，逐个判断处理
allItems.forEach(item => {
  // 从当前item内部找到对应的价格标签，避免拿到其他item的价格
  const priceElement = item.querySelector("span.price_value");
  
  // 先判断价格元素是否存在，防止页面结构变化导致报错
  if (!priceElement) return;
  
  // 清理价格字符串（去掉空格）并转换为数字
  const cleanedPrice = priceElement.innerHTML.replace(/ /g, '');
  const priceNumber = parseInt(cleanedPrice, 10);
  
  // 确保转换后的价格是有效数字，且满足条件时隐藏元素
  if (!isNaN(priceNumber) && priceNumber >= 5000) {
    item.style.display = "none";
    // 也可以用更简洁的写法：item.hidden = true;
  }
});

关键调整点说明 #

• 替换querySelector为querySelectorAll：前者只取第一个匹配元素，后者会返回所有符合条件的元素集合
• 在每个item内部查找价格标签：原来的代码全局找第一个价格，现在每个item对应自己的价格，避免判断逻辑混乱
• 增加容错判断：检查价格元素是否存在、转换后的价格是否为有效数字，防止页面结构异常导致代码中断
• 遍历处理：用forEach循环遍历所有元素，逐个应用判断逻辑

这样修改后，所有价格≥5000的.item元素都会被隐藏啦～

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