計算寬動態（jQuery的）

HTML：計算寬動態（jQuery的）

<div class="parent"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 
</div>

jQuery的

parentWidth = $(".parent").outerWidth(true); 
oneWidth = $(".parent .one").outerWidth(true); 
twoWidth = $(".parent .two").outerWidth(true); 
$('.parent .three').width(parentWidth - oneWidth - twoWidth);

但事實是，無論是DIV。一。二或可能不存在有些時候，我怎麼修改的jQuery爲了它？

謝謝

來源

2010-01-24 3zzy

您可以檢查是否通過檢查其長度屬性存在一個元素：

parentWidth = $(".parent").outerWidth(true); 
oneWidth = $(".parent .one").length ? $(".parent .one").outerWidth(true):0; 
twoWidth = $(".parent .two").length ? $(".parent .two").outerWidth(true):0; 
$('.parent .three').width(parentWidth - oneWidth - twoWidth);

來源

2010-01-24 16:39:58

完美，謝謝堆！ :) – 3zzy 2010-01-24 16:45:03

不客氣:) – 2010-01-24 16:46:33

-1爲非系統性方法和違反DRY原則。 – 2010-01-24 17:58:40

爲什麼你不檢查$ function的結果是否爲空？ ;）這樣你就可以很容易地發現div是否存在，並在這種情況下簡單地將寬度設置爲0。

oneDiv = $(".parent .one"); 
oneWidth = oneDiv.length == 0 ? 0 : oneDiv.outerWidth(true);

來源

2010-01-24 16:28:51

'$（選擇）'也永遠不可能給你'null' 。如果沒有匹配的元素，您將只獲得一個空列表包裝。你需要檢查例如。 '$（'。parent .one'）。length'。 – bobince 2010-01-24 16:41:46

謝謝你指出，我會解決它。我實際上來自Prototype的世界，其中$給你null爲不存在的元素。 – 2010-01-24 16:45:04

試試這個代碼：

var third = $('.parent .three'); 
var wantedWidth = third.parent().outerWidth(true); 

third.siblings().each(function(){ 
    wantedWidth -= $(this).outerWidth(true); 
}); 

third.width(wantedWidth);

來源

2010-01-24 17:04:27

計算寬動態（jQuery的）

回答

相關問題