0

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

我在下面附上了代码和 JSFIDDLE，选项 2 是需要检测没有“div.Image”实例并将“div.Text”大小调整为 450 像素的选项。

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>

提前感谢您的任何回复。

4

4 回答 4

1

首先，您需要更改课程的 ID，因为您不能重复 ID，然后使用以下内容：

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

    });    

});

这是小提琴

于 2013-07-10T15:58:55.723 回答
1

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

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

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

于 2013-07-10T15:59:48.847 回答
0
  1. 您的两个容器都具有相同的id. 将其更改为class，因为id的目的是元素的唯一表示。

  2. 我会这样做：

    $(document).ready(function()
{
    $(".listingItem").each(function()
    {
        isImgInside = $(this).find(".Image").length ? true : false;
        if(! isImgInside )
            $(this).find(".Text").width(450);
    });
});
于 2013-07-10T16:01:18.560 回答
0

或http://jsfiddle.net/C7fQ8/

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

宽度 470 以考虑图像 div 填充

于 2013-07-10T16:11:54.753 回答