javascript - 如何用jquery计算盒子的宽度？

Question

如何计算从初始框到我们将要点击的框的宽度？

所以如果我点击黄色按钮..然后将计算红色、蓝色、绿色、黄色框的宽度

200 + 150 + 180 + 120，结果为650px

如果我点击绿色框，结果将是 530px

如果你点击红框，只是红框的宽度(200px)

https://jsfiddle.net/wx05ng24/

$('.div-click').click(function(e){
		$(this).outerWidth();
		alert($(this).outerWidth());
});

	.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 ;
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 1

您可以使用 prevAll()获取每个前面的 div 并将它们的宽度添加到总数中，如下所示:

$('.div-click').click(function(e) {
  var totWidth = this.offsetWidth;
  $(this).prevAll().each(function(index) {
    totWidth += this.offsetWidth
  });
  console.log(totWidth);
});

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>