如何使用jQuery计算框的宽度？

Question

如何计算从初始框到要单击的框的宽度？

因此，如果单击黄色按钮。那么将计算红色，蓝色，绿色，黄色框的宽度

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

如果我单击绿色框，结果将为530px

如果您单击红色框，则仅显示红色框的宽度（200像素）

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')获得clicked元素的所有先前元素。

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