根据父div特定类动态修改子元素的类

架构老林

2026-8-11

问题：动态切换父类时更新子元素的.summary-item-*类

需求：当父元素的类（.sqs-gallery-design-carousel-slides-in-view-4、.sqs-gallery-design-carousel-slides-in-view-3、.sqs-gallery-design-carousel-slides-in-view-2）随屏幕尺寸变化时，自动为子元素.summary-item添加/移除对应的.summary-item-*类。

现有静态代码（可正常运行）

JavaScript

(function(d) {
  const carouselSlidesFour = document.querySelectorAll(".sqs-gallery-design-carousel-slides-in-view-4 .summary-item");
  const carouselSlidesThree = document.querySelectorAll(".sqs-gallery-design-carousel-slides-in-view-3 .summary-item");
  const carouselSlidesTwo = document.querySelectorAll(".sqs-gallery-design-carousel-slides-in-view-2 .summary-item");

  carouselSlidesFour.forEach((element, x) => {
    const a = parseInt(x / 4) + 1;
    element.classList.add(`summary-item-${a}`);
  });

  carouselSlidesThree.forEach((element, y) => {
    const b = parseInt(y / 3) + 1;
    element.classList.add(`summary-item-${b}`);
  });

  carouselSlidesTwo.forEach((element, z) => {
    const c = parseInt(z / 2) + 1;
    element.classList.add(`summary-item-${c}`);
  });
}(document));

CSS

.sqs-block-summary {
  border: solid 2px #000000;
  margin: 10px;
}

.sqs-block-content {
  margin: 10px;
}

.summary-item {
  display: inline-block;
  width: 25.25%;
  white-space: nowrap;
  vertical-align: top;
  padding-left: 1%;
  padding-right: 1%;
}

.sqs-block-summary * {
  box-sizing: border-box;
}

.summary-item-list-container {
  width: 100%;
  overflow: hidden;
}

.summary-item-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

.summary-item-1 {
  color: red !important;
}

.summary-item-2 {
  color: green !important;
}

.summary-item-3 {
  color: blue !important;
}

.summary-item-4 {
  color: orange !important;
}

.summary-item-5 {
  color: grey !important;
}

.summary-item-6 {
  color: purple !important;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="sqs-block-summary four-row">
  <div class="sqs-block-content">
    <div class="summary-block-wrapper">
      <div class="summary-item-list-container">
        <div class="summary-item-list sqs-gallery-design-carousel-slides-in-view-4">
          <div class="summary-item"> Item 1 </div>
          <div class="summary-item"> Item 2 </div>
          <div class="summary-item"> Item 3 </div>
          <div class="summary-item"> Item 4 </div>
          <div class="summary-item"> Item 5 </div>
          <div class="summary-item"> Item 6 </div>
          <div class="summary-item"> Item 7 </div>
          <div class="summary-item"> Item 8 </div>
          <div class="summary-item"> Item 9 </div>
          <div class="summary-item"> Item 10 </div>
          <div class="summary-item"> Item 11 </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="sqs-block-summary three-row">
  <div class="sqs-block-content">
    <div class="summary-block-wrapper">
      <div class="summary-item-list-container">
        <div class="summary-item-list sqs-gallery-design-carousel-slides-in-view-3">
          <div class="summary-item"> Item 1 </div>
          <div class="summary-item"> Item 2 </div>
          <div class="summary-item"> Item 3 </div>
          <div class="summary-item"> Item 4 </div>
          <div class="summary-item"> Item 5 </div>
          <div class="summary-item"> Item 6 </div>
          <div class="summary-item"> Item 7 </div>
          <div class="summary-item"> Item 8 </div>
          <div class="summary-item"> Item 9 </div>
          <div class="summary-item"> Item 10 </div>
          <div class="summary-item"> Item 11 </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="sqs-block-summary three-row">
  <div class="sqs-block-content">
    <div class="summary-block-wrapper">
      <div class="summary-item-list-container">
        <div class="summary-item-list sqs-gallery-design-carousel-slides-in-view-2">
          <div class="summary-item"> Item 1 </div>
          <div class="summary-item"> Item 2 </div>
          <div class="summary-item"> Item 3 </div>
          <div class="summary-item"> Item 4 </div>
          <div class="summary-item"> Item 5 </div>
          <div class="summary-item"> Item 6 </div>
          <div class="summary-item"> Item 7 </div>
          <div class="summary-item"> Item 8 </div>
          <div class="summary-item"> Item 9 </div>
          <div class="summary-item"> Item 10 </div>
          <div class="summary-item"> Item 11 </div>
        </div>
      </div>
    </div>
  </div>
</div>

尝试的动态代码（失败）

(function(d) {
  const galleryCarousel = document.querySelectorAll(".summary-item-list");
  const carouselSlidesFourParent = document.querySelectorAll(".sqs-gallery-design-carousel-slides-in-view-4");
  const carouselSlidesThreeParent = document.querySelectorAll(".sqs-gallery-design-carousel-slides-in-view-3");
  const carouselSlidesTwoParent = document.querySelectorAll(".sqs-gallery-design-carousel-slides-in-view-2");
  const carouselSlidesFour = document.querySelectorAll(".sqs-gallery-design-carousel-slides-in-view-4 .summary-item");
  const carouselSlidesThree = document.querySelectorAll(".sqs-gallery-design-carousel-slides-in-view-3 .summary-item");
  const carouselSlidesTwo = document.querySelectorAll(".sqs-gallery-design-carousel-slides-in-view-2 .summary-item");

  carouselSlidesFour.forEach((element, x) => {
    const a = parseInt(x / 4) + 1;
    
    if (hasClass(galleryCarousel, carouselSlidesFourParent)) {
      element.classList.add(`summary-item-${a}`);
    } 
    else {
      element.classList.remove(`summary-item-${a}`);
    }
  });

  carouselSlidesThree.forEach((element, y) => {
    const b = parseInt(y / 3) + 1;
    
    if (hasClass(galleryCarousel, carouselSlidesThreeParent)) {
      element.classList.add(`summary-item-${b}`);
    } 
    else {
      element.classList.remove(`summary-item-${b}`);
    }
  });

  carouselSlidesTwo.forEach((element, z) => {
    const c = parseInt(z / 2) + 1;
    
    if (hasClass(galleryCarousel, carouselSlidesTwoParent)) {
      element.classList.add(`summary-item-${c}`);
    } 
    else {
      element.classList.remove(`summary-item-${c}`);
    }
  });
}(document));

失败原因分析

无窗口监听：未绑定resize事件，屏幕尺寸变化时代码不会重新执行。
hasClass函数未定义：代码中使用了未声明的hasClass函数，且传入的是NodeList而非单个元素，类判断逻辑错误。
静态选择器失效：初始获取的元素列表是静态的，父类切换后不会自动更新。
旧类未清除：切换视图数时，未移除之前添加的.summary-item-*类，导致类叠加。

解决方案代码

修正后的JavaScript

(function(d) {
  // 防抖函数，避免resize频繁触发
  function debounce(func, delay = 200) {
    let timer;
    return function() {
      clearTimeout(timer);
      timer = setTimeout(func, delay);
    };
  }

  // 处理所有轮播容器的子元素类
  function updateSummaryItemClasses() {
    // 获取所有轮播容器
    const carouselContainers = d.querySelectorAll(".summary-item-list");
    
    carouselContainers.forEach(container => {
      // 获取当前容器的视图数（从类名提取数字）
      const viewCountMatch = container.className.match(/sqs-gallery-design-carousel-slides-in-view-(\d+)/);
      if (!viewCountMatch) return;
      
      const viewCount = parseInt(viewCountMatch[1]);
      const items = container.querySelectorAll(".summary-item");
      
      // 先移除所有旧的.summary-item-*类
      items.forEach(item => {
        item.classList.forEach(cls => {
          if (cls.startsWith("summary-item-")) {
            item.classList.remove(cls);
          }
        });
      });
      
      // 添加新的类
      items.forEach((item, index) => {
        const groupNumber = Math.floor(index / viewCount) + 1;
        item.classList.add(`summary-item-${groupNumber}`);
      });
    });
  }

  // 初始化执行一次
  updateSummaryItemClasses();
  
  // 监听窗口 resize 事件，使用防抖优化
  window.addEventListener("resize", debounce(updateSummaryItemClasses));
}(document));

说明

防抖处理：避免窗口 resize 时频繁执行代码，提升性能。
动态提取视图数：从父类名中提取当前显示的幻灯片数量，无需硬编码判断类名。
清除旧类：每次更新前移除所有.summary-item-*类，避免类冲突。
实时更新：绑定 resize 事件，屏幕尺寸变化时自动重新计算并更新类。

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

根据父div特定类动态修改子元素的类

现有静态代码（可正常运行） #

JavaScript #

CSS #

HTML #

尝试的动态代码（失败） #

失败原因分析 #

解决方案代码 #

修正后的JavaScript #

说明 #