CODEWITHSUNDEEP
jquerycss
Nick
Nick

Reputation: 99

Adding margin-left to a div

I have a lot of divs here and I want to add 55px to all the margin-left not set it to 55px but add it to what is already on there here is some code.

$("#AfirstObj,#AsecondObj,#AthirdObj,#AfourthObj, #AfithObj,#AsixthObj,#AseventhObj,#AeightObj,#AnineObj,#AtenthObj,#AeleventhObj,#AtwelveObj,#AthirteenObj,#AfourteenObj,#AfifthteenObj,#AsixteenObj, #AseventeenObj,#AeighteenObj,#AnineteenObj").what do i add here? ;

Upvotes: 0

Views: 43

Answers (1)

Weafs.py
Weafs.py

Reputation: 22992

Loop through them and add 55 to the current margin-left value.

$("#AfirstObj,#AsecondObj,#AthirdObj,#AfourthObj, #AfithObj,#AsixthObj,#AseventhObj,#AeightObj,#AnineObj,#AtenthObj,#AeleventhObj,#AtwelveObj,#AthirteenObj,#AfourteenObj,#AfifthteenObj,#AsixteenObj, #AseventeenObj,#AeighteenObj,#AnineteenObj").each(function() {
  $(this).css('margin-left', function(i, val) {
    return String(parseInt(val) + 55) + 'px';
  })
});

Working Example.

$('#one, #two, #three, #four').each(function() {
  $(this).css('margin-left', function(i, val) {
    return String(parseInt(val) + 55) + 'px';
  })
})
#one, #two, #three, #four {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: tan;
}
#one, #three {
  margin-left: 5px;
}
#two, #four {
  margin-left: 55px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>

Upvotes: 3

Related Questions