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

Question

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

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

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

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

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

https://jsfiddle.net/wx05ng24/

.a12345 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://i.ibb.co/WppGWkx/straat.jpg);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

var animalMovement : Movement<Animal>

animalMovement.moveAnimal(dog)

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')获取被单击元素的所有先前元素。

   

$('.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;。
而且只有在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>