如何用jQuery实现按5的倍数显示父容器子div，隐藏其余子元素？

当然可以用jQuery轻松实现这个需求！先把你的规则再明确下，方便咱们对应代码逻辑：

• 当父容器内子div数量是5的倍数（5、10、15...）：所有子元素全部显示
• 当数量在5n+1到5n+4区间（比如6-9、11-14...）：只显示前5n个元素，隐藏超出的部分

第一步：页面结构示例 #

先补全你给出的页面结构，建议给子元素统一加个类名（比如.child），方便精准选择：

<div class="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
  <div class="child">子元素4</div>
  <div class="child">子元素5</div>
  <div class="child">子元素6</div>
  <!-- 更多子元素按需添加 -->
</div>

第二步：jQuery实现代码 #

下面是核心逻辑代码，注释里已经写清楚每一步的作用：

$(document).ready(function() {
  // 遍历每个父容器，避免多个.parent互相影响
  $('.parent').each(function() {
    // 获取当前父容器下的所有子元素
    const $childElements = $(this).children('.child');
    // 统计子元素总数
    const totalChildren = $childElements.length;
    // 计算最近的5的倍数（比如6个的话得到5，11个得到10）
    const nearestMultipleOf5 = Math.floor(totalChildren / 5) * 5;

    // 判断是否需要隐藏部分元素
    if (totalChildren % 5 !== 0) {
      // 从nearestMultipleOf5索引开始（JS索引从0起），隐藏后面的所有元素
      $childElements.slice(nearestMultipleOf5).hide();
    } else {
      // 如果是5的倍数，确保所有元素都显示
      $childElements.show();
    }
  });
});

额外说明 #

• 如果你的子元素没有统一的.child类，也可以用$(this).children('div')来选择所有子div，但还是建议加类名，避免误选其他嵌套元素
• 如果需要动态添加子元素后重新执行规则，可以把核心逻辑封装成一个函数，在添加元素后调用这个函数即可

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