如何用JS筛选指定class的div？现有筛选代码执行异常排查

我有一批带有username-card类的div元素，需要实现以下功能：

• 检查用户输入的值是否存在于所有该类div的title属性数组中，若不存在则显示错误提示
• 若输入值存在，则隐藏所有title属性与输入值不匹配的div元素

当前遇到的问题：用户名不存在的判断逻辑可正常触发，但匹配成功后，遍历并隐藏不匹配卡片的逻辑未执行。两个函数单独运行均正常，无法定位问题所在。

我的代码 #

JavaScript

function showSearchedUserCard() {
  const username = document.getElementById("inputSearchUserCards").value
  const divList = document.querySelectorAll('.username-card');
  const titles = []
  divList.forEach(el => {
    titles.push(el.title);
  })
  if (titles.includes(username)) {
    hideUserCards(username)
  } else {
    document.getElementById("inputSearchUserCards").value = 'User does not exist';
    document.getElementById("inputSearchUserCards").style.color = 'red';
  }
}

function hideUserCards(username) {
  const cards = Array.prototype.slice.call(document.getElementsByClassName('username-card'));

  for (const card of cards) {
    if (card.title === username) {
      card.style.display = 'block';
    } else {
      card.style.display = 'none';
    }
  }
}

CSS

.username-card {
  width: 100px;
  height: 50px;
  background-color: green;
  margin: 10px;
}

HTML

<div class="col-lg-8 col-md-7 col-sm-12 col-12">
  <input type="search" class="form-control" id="inputSearchUserCards" placeholder="Enter username" list="UserName">
</div>
<div class="col-lg-3 col-md-4 col-sm-9 col-9">
  <button class="btn btn-success" onclick="showSearchedUserCard()"> 
           <strong>Filter</strong>
     </button>
</div>

<!-- Example data -->
<div class="card-body px-0 py-0">
  <div class="username-card" title="Bob">Bob</div>
  <div class="username-card" title="Joe">Joe</div>
  <div class="username-card" title="Mary">Mary</div>
</div>

问题原因 #

问题出在hideUserCards函数里的document.getElementsByClassName——它返回的是动态HTMLCollection。当你把元素设置为display: none后，这个集合会自动更新（移除隐藏的元素），导致遍历过程中部分元素被跳过，看起来像是逻辑没执行。

解决方法 #

方法1：将动态集合转为静态数组

把getElementsByClassName返回的集合转换成静态数组，避免遍历中集合变化：

function hideUserCards(username) {
  // 用Array.from转为静态数组
  const cards = Array.from(document.getElementsByClassName('username-card'));

  for (const card of cards) {
    card.style.display = card.title === username ? 'block' : 'none';
  }
}

方法2：改用静态NodeList（更简洁）

直接使用document.querySelectorAll，它返回的是静态NodeList，不会随DOM变化而更新，还可以直接用forEach遍历：

function hideUserCards(username) {
  document.querySelectorAll('.username-card').forEach(card => {
    card.style.display = card.title === username ? 'block' : 'none';
  });
}

额外优化 #

可以简化showSearchedUserCard里的存在判断逻辑，不用单独收集title数组，直接用some方法判断，同时加上trim()处理输入空格：

function showSearchedUserCard() {
  const username = document.getElementById("inputSearchUserCards").value.trim();
  const divList = document.querySelectorAll('.username-card');
  const userExists = divList.some(el => el.title === username);
  
  if (userExists) {
    hideUserCards(username)
  } else {
    const input = document.getElementById("inputSearchUserCards");
    input.value = 'User does not exist';
    input.style.color = 'red';
  }
}

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