[英]How to calculate the width of the box with jquery?
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 200 + 150 + 180 + 120,结果为650px
And if I click the green box, the result will be 530px 如果我单击绿色框,结果将为530px
If you click the red box, just width of the red box (200px) 如果您单击红色框,则仅显示红色框的宽度(200像素)
https://jsfiddle.net/wx05ng24/ 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>
You can use prevAll() to get each preceding div and add their width to the total like this: 您可以使用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>
Use prevAll('.div-click')
to get all the previous elment of the clicked element. 使用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>
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;
注意,您必须将包含div的position: relative;
设为position: relative;
. 。
And it will only work if the divs are next to each other and aren't breaking to a new line. 而且只有在div彼此相邻且不中断新行时才起作用。
Its very easy just keep track of the selected div. 跟踪选定的div非常简单。
So if we select div 3 then we need to calculate 1,2 and 3. for this i used .index()
因此,如果我们选择div 3,则需要计算1,2和3。为此,我使用了.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.