檢測div並調整其他div如果不存在

我有一個包含3列，圖像，文本和表的列表項。他們都是左邊的。我需要檢測列表項是否包含類'.Image'的div，如果此div不存在，我需要調整具有類'.Text'的div的寬度。檢測div並調整其他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>

先謝謝您的任何答覆。

來源

2013-07-10 huddds

首先，你需要改變你的ID爲一類，因爲你不能重複的ID，然後使用這樣的事情：

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

    });  

});

這裏是fiddle

來源

2013-07-10 15:58:55 isJustMe

感謝您的答覆，我認爲這是更適合我將使用這種類型的東西。 – huddds

沒問題，很高興你覺得它有用 – isJustMe

你應該能夠做到只用css。

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

設置默認的.text寬度450如果。文本元素由元素圖像配之前，調整到350的容器

來源

2013-07-10 15:59:48

請注意，這假設你的.Text元素將永遠在圖像後出現。如果情況並非如此，這將不起作用。 –

這也適用於即7和8？因爲大多數我的網站用戶將使用這些瀏覽器。謝謝 – huddds

據說在IE7中有bug（如果.Image元素是由javascript動態插入的，則該規則將無法正確應用）。 IE8工作正常。 –

都具有相同的id。將其更改爲class，因爲id的用途是元素的唯一表示。

我會做這樣的：

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

來源

2013-07-10 16:01:18 Dimdum

這與我的迴應基本相同 – isJustMe

或http://jsfiddle.net/C7fQ8/

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

寬度470考慮到圖像格填充

來源

2013-07-10 16:11:54

檢測div並調整其他div如果不存在

回答

相關問題