Detect div and resize other div if not present

Question

I have a list item with 3 columns, an image, text, and a table. They are all float left. I need to detect if the list item contains a div with the class '.Image', if this div is not present I need to resize the width of the div that has the class '.Text'.

I've attached the code and a JSFIDDLE below, option 2 is the one that needs to detect that there isn't a 'div.Image' instance and resize 'div.Text' to 450px.

JSFIDDLE

jQuery:

$(document).ready(function(){
    $('.Image').each().parent().find('div.Text').width(450);
});

CSS:

#listingItem{width:660px; background-color:#666666;}
.Image{width:100px;float:left; background-color:#cccccc; height:200px; padding:10px;}
.Text{width:350px;float:left;background-color:#666666; color:#FFFFFF; height:200px;padding:10px;}
.Table{width:150px; float:left;background-color:#999999; height:200px;padding:10px;}
.clr{clear:both;}
table tr td{color:#FFFFFF;}

HTML:

<h2>OPTION 1</h2>
<div id="listingItem">
    <div class="Image"><img src="http://foto.hrsstatic.com/fotos/0/3/256/256/80/FFFFFF/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F1%2F6%2F4%2F9%2Fteaser_164977.jpg/NJznvEm71tK4eSpZVLEFZA%3D%3D/128,128/6/Holiday_Inn_MIAMI_BEACH-OCEANFRONT-Miami_Beach-Exterior_view-5-164977.jpg" width="100" /></div>
    <div class="Text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla sagittis iaculis. Etiam tincidunt egestas urna, et congue lorem elementum eget. Morbi sed nibh rutrum, pulvinar metus a, bibendum purus. In porttitor ornare massa et dapibus. Duis tempor facilisis ipsum, sed tempus mauris ornare id. Donec in consequat est. Nunc pulvinar nibh in lorem suscipit, at eleifend tellus dictum. Proin congue leo eu dui feugiat condimentum. Sed sagittis sagittis consectetur. Quisque ut ultrices erat.
    </div>
    <div class="Table">
        <table cellspacing="0" cellpadding="5" border="0" width="150">
            <tr>
                <td bgcolor="#b22222">
                    CONTENT
                </td>
            </tr>
        </table>
    </div>
    <div class="clr"></div>
</div>

<h2>OPTION 2</h2>

<div id="listingItem">
    <div class="Text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla sagittis iaculis. Etiam tincidunt egestas urna, et congue lorem elementum eget. Morbi sed nibh rutrum, pulvinar metus a, bibendum purus. In porttitor ornare massa et dapibus. Duis tempor facilisis ipsum, sed tempus mauris ornare id. Donec in consequat est. Nunc pulvinar nibh in lorem suscipit, at eleifend tellus dictum. Proin congue leo eu dui feugiat condimentum. Sed sagittis sagittis consectetur. Quisque ut ultrices erat.
    </div>
    <div class="Table">
        <table cellspacing="0" cellpadding="5" border="0" width="150">
            <tr>
                <td bgcolor="#b22222">
                    CONTENT
                </td>
            </tr>
        </table>
    </div>
    <div class="clr"></div>
</div>

Thanks in advance for any responses.

Answer 1

First you will need to change your ID for a class, since you can't repeat IDs then use something like this:

$(document).ready(function(){
    $( ".listingItem" ).each(function() {
        if (!$(this).find('.Image').length){
            $(this).find('div.Text').width(450);
        }

    });    

});

Here is the fiddle