如何避免循环访问除首子元素外的元素并实现图片显隐切换？

问题说明 #

现有如下DOM结构：

<div class="container">
   <div class="row m-0 be_product_grid_image">
      <div class="col_classes">
        <img src="img1.png" />
      </div>
   </div>
   <div class="row m-0 be_product_grid_image">
      <div class="col_classes">
        <img src="img2.png" />
      </div>
   </div>
   <div class="row m-0 be_product_grid_image">
      <div class="col_classes">
        <img src="img3.png" />
      </div>
   </div>
   <div class="row m-0 be_product_grid_image">
      <div class="col_classes">
        <img src="img4.png" />
      </div>
   </div>
   <div class="row m-0 be_product_grid_image">
      <div class="col_classes">
        <img src="img5.png" />
      </div>
   </div>
</div>

需求：点击“show all”按钮时显示除第一张图片外的所有图片；点击“show less”按钮时隐藏除第一张图片外的所有图片，要求避免循环访问元素。

解决方案 #

方法1：CSS类切换 + 通用兄弟选择器 #

核心是用CSS选择器一次性选中第一张之后的所有图片容器，JS只负责切换容器的类名，完全不用循环。

先写CSS规则：

/* 默认隐藏第一张之外的所有图片容器 */
.container .be_product_grid_image ~ .be_product_grid_image {
    display: none;
}

/* 当容器添加show-all类时，显示后续所有图片容器 */
.container.show-all .be_product_grid_image ~ .be_product_grid_image {
    display: block;
}

然后编写JS逻辑：

// 获取元素
const container = document.querySelector('.container');
const showAllBtn = document.querySelector('#show-all');
const showLessBtn = document.querySelector('#show-less');

// 点击show all时添加类
showAllBtn.addEventListener('click', () => {
    container.classList.add('show-all');
});

// 点击show less时移除类
showLessBtn.addEventListener('click', () => {
    container.classList.remove('show-all');
});

方法2：:scope伪类配合兄弟选择器（现代浏览器适用） #

如果需要更精准地选择容器的直接子元素，可以用:scope伪类，兼容性稍差但逻辑一致：

CSS规则：

/* 默认隐藏容器下第一张之后的直接子元素 */
.container :scope > .be_product_grid_image ~ .be_product_grid_image {
    display: none;
}

/* 添加show-all类后显示这些元素 */
.container.show-all :scope > .be_product_grid_image ~ .be_product_grid_image {
    display: block;
}

JS部分和方法1完全一致，还是只做类名切换操作。

原理说明 #

这两种方案都是把显示/隐藏的逻辑交给CSS选择器处理，JS仅负责简单的类名切换，不需要遍历任何元素，既简洁又高效。

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