Question

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 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>

<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!

Answer 1

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