如何使用jQuery计算盒子宽度及起始盒至点击盒的总宽度

问题1：如何用jQuery计算单个盒子的宽度？ #

jQuery提供了多个方法来获取元素的宽度，不同方法对应盒模型的不同部分，你可以根据需求选择：

• width()：仅返回元素的内容区域宽度（不包含padding、border、margin）
• innerWidth()：返回内容宽度 + 内边距（padding）
• outerWidth()：返回内容宽度 + 内边距 + 边框（border）
• outerWidth(true)：返回内容宽度 + 内边距 + 边框 + 外边距（margin）

你的现有代码中使用的$(this).outerWidth()就是获取点击盒子的外宽度（包含border和padding），如果你的盒子没有额外的padding和border，用width()结果一致，但outerWidth()兼容性更好，能适配有边距的场景。

问题2：如何计算从第一个盒子到点击盒子的总宽度？ #

要实现点击盒子时累加从第一个到当前盒子的总宽度，我们可以通过以下步骤实现：

1. 点击事件触发时，定位当前点击的元素
2. 获取从第一个.div-click到当前元素的所有元素集合
3. 遍历集合，累加每个元素的宽度
4. 输出计算结果

完整实现代码 #

HTML

<div class="centerDiv">
  <div class="div-click A"></div>
  <div class="div-click B"></div>
  <div class="div-click C"></div>
  <div class="div-click D"></div>
  <div class="div-click E"></div>
  <div class="div-click F"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CSS

.centerDiv { width: 100%; height:200px; margin: 0 auto; }
.div-click { height:200px; float:left; }
.A { width: 200px; background-color:#fe0000 ; }
.B { width: 150px; background-color:#0036fe ; }
.C { width: 180px; background-color:#00fe36 ; }
.D { width: 120px; background-color:#fecb00 ; }
.E { width: 130px; background-color:#fe00e3 ; }
.F { width: 140px; background-color:#5a4c54 ; }

JavaScript

$('.div-click').click(function() {
  // 获取当前元素在.div-click集合中的索引（从0开始）
  const currentIdx = $(this).index('.div-click');
  // 截取从第一个到当前元素的所有盒子
  const targetElements = $('.div-click').slice(0, currentIdx + 1);
  
  // 初始化总宽度并累加
  let totalWidth = 0;
  targetElements.each(function() {
    totalWidth += $(this).outerWidth();
  });
  
  alert(`总宽度：${totalWidth}px`);
});

场景测试验证 #

• 点击黄色盒子（类D）：索引为3，截取前4个元素（A、B、C、D），总和为200+150+180+120=650px，符合预期
• 点击绿色盒子（类C）：索引为2，截取前3个元素（A、B、C），总和为200+150+180=530px，符合预期
• 点击红色盒子（类A）：索引为0，仅截取自身，总和为200px，符合预期

如果你喜欢更简洁的写法，可以用prevAll()结合addBack()来获取元素集合，代码如下：

$('.div-click').click(function() {
  let totalWidth = 0;
  // 获取当前元素及之前所有的.div-click元素
  $(this).prevAll('.div-click').addBack().each(function() {
    totalWidth += $(this).outerWidth();
  });
  alert(`总宽度：${totalWidth}px`);
});

prevAll('.div-click')会获取当前元素之前所有同辈的.div-click元素，addBack()则把当前元素重新加入集合，这样就得到了从第一个到当前的所有目标元素，逻辑更紧凑。

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