Catch the margin of the previous element and add another value to the next one

Question

Catch the margin of the previous element and add another value to the next one

Navigation

#1 by (1 votes)

2

I have the following code:

 <script>
        $(document).ready(function() { 
         $("div#bloco div").css({
          "background-color" : "red",
          "height" : "50px",
          "width" : "50px"
         });
         $("div#bloco div:first-child").css("margin-top","10px")

         a();
     });
  function a (){
  $('div#bloco div').each(function(){

    var m =  $("div#bloco div:first-child").css("margin-top");  
    var seg =  $("div#bloco div:first-child").next();

    var total = $(seg).prev().parents().css("margin-top");
    var replace = total.replace("px","");
    console.log(replace)

    $(this).next().css({
      "margin-top" : replace + 46 +"px"
    });;
  })
}
  </script>

HTML:

div id="bloco">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

The goal is to get the value of the margin of div previous and sum +46 to the next element, for example: value of div 1 = 0 + 46 and assign to div2.

The problem is that all divs are coming with 46, the right would be the second came with 46, the third came with 92, and so on. Below I left the test for you to test. Can anyone help me?

$(document).ready(function() { 
         $("div#bloco div").css({
          "background-color" : "red",
          "height" : "50px",
          "width" : "50px"
         });
         $("div#bloco div:first-child").css("margin-top","10px")

         a();
     });

  function a (){
  $('div#bloco div').each(function(i){
    
    var m =  $("div#bloco div:first-child").css("margin-top");  
    var seg =  $("div#bloco div:first-child").next();

    var total = $(seg).prev().parents().css("margin-top");
    var replace = total.replace("px","");
  

    $(this).next().css({
      "margin-top" : replace + 46 +"px"
    });;
    console.log("div: "+ i + " " + $(this).css("margin-top"))
  })
}

<div id="bloco">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

javascript jquery

asked by anonymous 10.04.2018 / 18:11

1 answer

How to add a class to an HTML element, through JavaScript. In my case, I need to add a class in the h1 element below Remove arrow down from a ComboBox

score 1 · Accepted Answer

I think you made some confusion in the code. Here's a simple way to get what you want. I just made some changes to each .

Using parseInt , you convert 10px to just 10 , for example.

$(document).ready(function() { 
   $("div#bloco div").css({
    "background-color" : "red",
    "height" : "50px",
    "width" : "50px"
   });
   $("div#bloco div:first-child").css("margin-top","10px")

   a();
});

function a (){
   var m =  $("div#bloco div:first-child").css("margin-top");  
   $('div#bloco div').each(function(i){

      var atual = parseInt($(this).css("margin-top"));
      var proximo = $(this).next();
      
      proximo.css("margin-top", atual+46+"px");
      console.log("div: "+ i + " " + $(this).css("margin-top"))
   });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="bloco">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>