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

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> 

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

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>