Take the previous element’s margin and add one more value to the next

Question

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 take the value of the div previous and sum +46 to next element, example: value of div 1 = 0 + 46 and assign to div2.

The problem is that all divs You 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 someone 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>

Answer 1

I think you made some mistake in the code. Here’s a simple way to get what you want. I’ve only made a few modifications to the each.

Using parseInt, you convert 10px for only the value 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>
<div id="bloco">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>