jquery - 動的に幅を計算する (jQuery)

Question

HTML:

<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 .one または .two のいずれかが存在しない場合があることです。そのために jQuery を変更するにはどうすればよいですか?

ありがとう

Answer 1

length プロパティを確認することで、要素が存在するかどうかを確認できます。

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);

Answer 2

$ function の結果が空かどうかだけをチェックしてみませんか? ;) そうすれば、div が存在するかどうかを簡単に確認でき、その場合は単純に幅を 0 に設定できます。

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

Answer 3

このコードを試してください：

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

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

third.width(wantedWidth);