How to calculate the width of the box with jquery?

Question

How do calculate the width from the initial box to the box we will click on?

So if I click the yellow button.. Then width of the red, blue, green, yellow boxes will be calculated

200 + 150 + 180 + 120, result is 650px

And if I click the green box, the result will be 530px

If you click the red box, just width of the red box (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

Its very easy just keep track of the selected div.

So if we select div 3 then we need to calculate 1,2 and 3. for this i used .index()

Se the example below to understand more

$(".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>

Answer 2

Use prevAll('.div-click') to get all the previous elment of the clicked element.

   

$('.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

You could get the position of the element and then add its width:

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

Note that you have to make the containing div position: relative;.
And it will only work if the divs are next to each other and aren't breaking to a new line.

Answer 4

You can use prevAll() to get each preceding div and add their width to the total like this:

$('.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>