html.de - jQuery: Override padding from element if exists - Demo #2

by SpiceLab

HTML

<div class="flex-container">
  <div class="left">
   <p style="padding-left:30px">
   foobar left
   </p>
   <p style="padding-left:50px">
   foobar left
   </p>
 </div>
 <div class="right">
   <p style="padding-left:50px">
   foobar left
   </p>
   <p style="padding-left:30px">
   foobar left
   </p>
 </div>
</div>
<div class="flex-container">
  <div class="left">
   <p style="padding-left:50px">
   foobar left
   </p>
   <p style="padding-left:30px">
   foobar left
   </p>
 </div>
 <div class="right">
   <p style="padding-left:30px">
   foobar left
   </p>
   <p style="padding-left:50px">
   foobar left
   </p>
 </div>
</div>

CSS

.flex-container {display:flex;justify-content:space-around;border:2px solid #555;margin:10px;}
p {border:1px solid red;}

JavaScript

var $mySelector = $('.flex-container .left p, .flex-container .right p');
$mySelector.each(function() {
  if ($(this).css('padding-left') == '30px') $(this).css('padding-left', '200px');
})