如何用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>

Answer 2

使用prevAll('.div-click') 获取被点击元素的所有先前元素。

   

$('.div-click').click(function(e) {
      var $prev = $(this).prevAll('.div-click');
      var width = $(this).width();;
      $.each($prev, function() {
        width += $(this).width();
      });
      alert("total width: " + width);
   });

.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 3

您可以获取元素的位置，然后添加它的宽度：

$(this).position().left + $(this).outerWidth()

请注意，您必须将包含的 div 设为 position: relative;。
只有当 div 彼此相邻并且没有换行时，它才会起作用。

Answer 4

跟踪选定的 div 非常简单。

所以如果我们选择 div 3 那么我们需要计算 1,2 和 3。为此我使用了.index()

请参阅下面的示例以了解更多信息

$(".centerDiv> div").click(function(){
console.clear();
var index = $(this).index() // know the index of the div which selected
var widthSum =0;
var sumText = "";
$(this).parent().children("div").each(function(itemIndex, item){
   
     if (itemIndex <= index) // Keep track of the divs we want to calculate
     {
         widthSum += $(item).width();
         sumText += $(item).attr("class").split(" ")[1] + " "; // just to show which div did we included
      }
         
     

  });
  
  console.log("The total width of divs ["+ sumText+ "] is " + widthSum)
});

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