如何修改JS代码，仅对含alt="long"的img的class1元素设置display:none

问题分析 #

你当前的代码会批量隐藏所有.class1容器，但实际需求是只隐藏那些内部包含alt="long"属性<img>元素的.class1div，下面是纯原生JavaScript的解决方案，完全不需要依赖jQuery。

完整代码示例 #

先看示例HTML结构：

<div class="class1">
  <img alt="long" src="example1.jpg">
  <!-- 这个div会被隐藏 -->
</div>
<div class="class1">
  <img alt="short" src="example2.jpg">
  <!-- 这个div保持显示 -->
</div>

修改后的JavaScript代码：

// 获取所有class为class1的div元素
const class1Divs = document.querySelectorAll('.class1');

// 遍历每个div容器
class1Divs.forEach(div => {
  // 检查当前div内是否存在alt="long"的img元素
  const targetImg = div.querySelector('img[alt="long"]');
  if (targetImg) {
    // 找到符合条件的img，就隐藏当前div
    div.style.display = 'none';
  }
});

代码细节说明 #

1. 获取目标元素：用document.querySelectorAll('.class1')获取所有.class1的div，返回的NodeList可以直接用forEach遍历。如果习惯用getElementsByClassName，可以转成数组再处理：

   const class1Divs = Array.from(document.getElementsByClassName('class1'));
   

2. 筛选符合条件的容器：在每个div内部用querySelector('img[alt="long"]')精准查找目标img——这个方法只会在当前div的子节点里匹配，找到就返回元素，找不到则返回null。
3. 执行隐藏操作：只有找到对应img的div才会被设置display: none，其他.class1元素完全不受影响。

对比错误逻辑 #

你之前的代码应该是直接对所有.class1元素执行隐藏，比如：

// 错误示例：批量隐藏所有class1元素
const class1Divs = document.getElementsByClassName('class1');
for (let i = 0; i < class1Divs.length; i++) {
  class1Divs[i].style.display = 'none';
}

修改的核心就是增加了内部元素的条件判断，只对包含目标img的容器执行隐藏操作。

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