Add inline CSS via jQuery

Question

I don't know jQuery very well so I don't know how to add CSS inline. This is my code:

<div class="gm-style-iw" style="top: 9px; position: absolute; left: 15px; width: 23px;">
 <div style="display: inline-block; overflow: hidden; max-height: 330px; max-width: 176px;">
  <div style="overflow: auto">
   <div id="iw-container">
   </div>
  </div>
 </div>
</div>

I want to change the max-width of second div and add overflow: none to the div above #iw-container.

I tried this but it did not work:

var iwOuter = $('.gm-style-iw');
iwOuter.children().css({max-width:'250px !important'});
iwOuter.children().children().css({overflow:'none'});

EDIT i want to customize infowindow Google and for me is important to change the value of max-width and overflow.... i think that your code maybe are good, but i don't understand why doesn't work...

Answer 1

In jQuery you can do something like this:

$('.gm-style-iw > div').css('max-width', "250px !important");
$('#iw-container').parent().css('overflow', 'none');//css wasn't valid here

Using > div means it gets the first div only, if you want all divs to have a max-width, use:

$('.gm-style-iw').children().css('max-width', "250px !important");

Using the .parent() function means that it gets only the parent of the selected element. It's cleaner and easier to read and shorter to write.