How to change dynamically size of hX tag if the parent div contains a child div of class X

I'm having some problems with jquery and I really hope someone out there can help!

I have the following HTML:

<div class="widgetContent">
        <div class="thumbNail"> </div>
        <h4>
            Lorem ipsum do开发者_如何学Golor sit amet, consectetur adipiscing elit. Fusce feugiat mauris non
            libero.
        </h4>
        <div class="clear">
        </div>
        <span class="newsDate">10th March 2011</span>
        <p class="widgetTexSummary">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat ...</p>
</div>

<div class="widgetContent">
        <div class="widgetEventsDate">
            <span class="month">Mar</span> <span class="date">24</span></div>
        <h4>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat mauris non
            libero.
        </h4>
        <div class="clear">
        </div>
        <span class="newsDate">10th March 2011</span>
        <p class="widgetTexSummary">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat ...</p>
</div>

and the following jquery:

 if ($(".widgetContent:has(.thumbNail)")){
         $('h4').css('width', '100px');
     }
     else{$('h4').css('width','195px');}

The idea is when I have a child with class 'thumbNail' in a widget the h4 within the widget would have its size dynamically change to 100px. In all other cases the h4 would be different size.

Could anyone help me please?

Thanks!

First, set the default width in your CSS.

.widgetContent h4 {
    width: 195px;
}

Then:

$('.widgetContent')       // all widgets
  .has('.thumbNail')      // but only those with a thumbnail
  .find('h4')             // find the <h4> children of those
  .css('width', '100px'); // and set the style

You could do:

$(".widgetContent").each(function() {
    if ($(this).find('.thumbNail').length) {
        $(this).find('h4').css('width', '100px');
   } else {
        $(this).find('h4').css('width', '195px');
    }
});

fiddle here: http://jsfiddle.net/nicolapeluchetti/9jdnY/1/

If I read your question correctly, you could do this...

$('.thumbNail + h4').css('fontSize','100px');

http://jsfiddle.net/jasongennaro/5Sf2B/

This basically chooses any h4 next to an element with class .thumbNail.

Here is a more readable example (at 25px): http://jsfiddle.net/jasongennaro/5Sf2B/1/

The "all other cases" should be dealt with in the stylesheet.

Not sure why you want it that big, but there you go ;-)

EDIT

I may have interpreted the Q incorrectly, although the concept is the same. If you want to change the width of the h4 instead of the font-size, then just do this:

$('.thumbNail + h4').css('width','100px');

http://jsfiddle.net/jasongennaro/5Sf2B/2/