Question

我有一个包含3列的列表项，图像，文本和表格。他们都漂浮着。我需要检测列表项是否包含类'.Image'的div，如果此div不存在，我需要调整具有类'.Text'的div的宽度。

我在下面附加了代码和JSFIDDLE，选项2是需要检测到没有'div.Image'实例并将'div.Text'调整为450px的那个。

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>

提前感谢您的回复。

Answer 1

首先，你需要更改一个类的ID，因为你不能重复ID然后使用这样的东西：

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

    });    

});

以下是fiddle

Answer 2

你应该只用css做到这一点。

.Text{width:450px;float:left;background-color:#666666; color:#FFFFFF; height:200px;padding:10px;}
.Image + .Text { width:350px; }

将默认.Text宽度设置为450.如果.Text元素前面有.Image元素，请将其调整为350.

Answer 3

您的两个容器都具有相同的id。将其更改为class，因为id的目的是元素的唯一表示。

我会这样做：

$(document).ready(function()
{
    $(".listingItem").each(function()
    {
        isImgInside = $(this).find(".Image").length ? true : false;
        if(! isImgInside )
            $(this).find(".Text").width(450);
    });
});

Answer 4

或http://jsfiddle.net/C7fQ8/

$(document).ready(function () {
    $('.listingItem:not(:has(.Image)) .Text').width(470);
});

宽度470以考虑图像div填充

检测div并调整其他div的大小（如果不存在）

4 个答案: