Javascript 如何使用jquery计算长方体的宽度？

如何计算从初始框到我们将单击的框的宽度

所以如果我点击黄色按钮。。然后计算红色、蓝色、绿色和黄色方框的宽度

200+150+180+120，结果是650像素

如果我点击绿色框，结果将是530px

如果单击红色框，只需单击红色框的宽度（200px）

$（'.div click'）。单击（函数（e）{
$（this.outerWidth（）；
警报（$（this.outerWidth（））；
});
.centerDiv
{
宽度：100%；
高度：200px；
保证金：0自动；
}
.div单击
{
高度：200px；
浮动：左；
}
A.
{
宽度：200px；
背景色：#fe0000；
}
B
{
宽度：150px；
背景色：#0036fe；
}
C
{
宽度：180px；
背景色：#00fe36；
}
D
{
宽度：120px；
背景色：#fecb00；
}
E
{
宽度：130px；
背景色：#fe00e3；
}
F
{
宽度：140px；
背景色：#5a4c54；
}

您可以使用获取前面的每个div，并将其宽度添加到总数中，如下所示：


$（'.div click'）。单击（函数（e）{
var totWidth=此.offsetWidth；
$（this）.prevAll（）.each（函数（索引）{
totWidth+=此.offsetWidth
});
控制台日志（总宽度）；
});
.centerDiv{
宽度：100%；
高度：200px；
保证金：0自动；
}
.div单击{
高度：200px；
浮动：左；
}
.A{
宽度：200px；
背景色：#fe0000；
}
.B{
宽度：150px；
背景色：#0036fe；
}
C{
宽度：180px；
背景色：#00fe36；
}
博士{
宽度：120px；
背景色：#fecb00；
}
E{
宽度：130px；
背景色：#fe00e3；
}
F{
宽度：140px；
背景色：#5a4c54；
}
您可以获取元素的位置，然后添加其宽度：

$（此）.position（）.left+$（此）.outerWidth（）

注意，您必须使包含div
的位置：相对

只有当两个div彼此相邻并且没有换行时，它才会起作用。
使用
prevAll（'.div click'）
获取所单击元素的所有先前元素



$（'.div click'）。click（函数（e）{
var$prev=$（this.prevAll（'.div click'）；
var width=$（this）.width（）；；
$.each（$prev，function（）{
宽度+=$（此）.width（）；
});
警报（“总宽度：”+宽度）；
});
.centerDiv
{
宽度：100%；
高度：200px；
保证金：0自动；
}
.div单击
{
高度：200px；
浮动：左；
}
A.
{
宽度：200px；
背景色：#fe0000；
}
B
{
宽度：150px；
背景色：#0036fe；
}
C
{
宽度：180px；
背景色：#00fe36；
}
D
{
宽度：120px；
背景色：#fecb00；
}
E
{
宽度：130px；
背景色：#fe00e3；
}
F
{
宽度：140px；
背景色：#5a4c54；
}
只要跟踪所选的div就很容易了

如果我们选择div3，那么我们需要计算1，2和3。为此，我使用了
.index（）

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


$（.centerDiv>div”）。单击（函数（）{
console.clear（）；
var index=$（this）.index（）//知道所选div的索引
var widthSum=0；
var sumText=“”；
$（this）.parent（）.children（“div”）.each（函数）（itemIndex，item）{
如果（itemIndex）这个问题不清楚。你想达到什么目的？啊，谢谢，这很实用。因为之前我用长度一个接一个地取盒子的宽度。再次感谢你