1
votes

Comment calculer la largeur de la boîte avec jquery?

Comment calculer la largeur de la case initiale à la case sur laquelle on cliquera?

Donc si je clique sur le bouton jaune .. Alors la largeur des cases rouges, bleues, vertes, jaunes sera calculée p >

200 + 150 + 180 + 120, le résultat est 650px

Et si je clique sur la case verte, le le résultat sera 530px

Si vous cliquez sur la case rouge, juste la largeur de la case rouge (200px)

p >

<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>

	.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 ;
	}

$('.div-click').click(function(e){
		$(this).outerWidth();
		alert($(this).outerWidth());
});

javascript jquery html css

1 commentaires

La question n'est pas claire. Qu'essayez-vous d'accomplir?

4 Réponses :

1
votes

Vous pouvez utiliser prevAll () pour obtenir chaque div précédent et ajouter leur largeur au total comme ceci:

<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>

.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;
}

$('.div-click').click(function(e) {
  var totWidth = this.offsetWidth;
  $(this).prevAll().each(function(index) {
    totWidth += this.offsetWidth
  });
  console.log(totWidth);
});

1 commentaires

Ah, merci, c'est pratique. car avant j'utilisais la longueur pour prendre une à une la largeur de la boîte. Encore une fois merci

0
votes

Vous pouvez obtenir la position de l'élément puis ajouter sa largeur:

$ (this) .position (). left + $ (this) .outerWidth ()

Notez que vous devez rendre la div position: relative; .
Et cela ne fonctionnera que si les divs sont côte à côte et ne franchissent pas une nouvelle ligne.

0 commentaires

1
votes

Utilisez prevAll ('. div-click') pour obtenir tout l'élément précédent de l'élément cliqué.

	
<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>

.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 ;
	}

   

$('.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);
   });

0 commentaires

0
votes

C'est très facile de garder une trace du div sélectionné.

Donc, si nous sélectionnons div 3, nous devons calculer 1,2 et 3. pour cela, j'ai utilisé .index ()

Consultez l'exemple ci-dessous pour en savoir plus

<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>

	.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 ;
	}

$(".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)
});

0 commentaires