要素の幅をループし、特定の幅が満たされるまで要素を表示します。

Question

同じ行にロゴ（静的）とページヘッダー（変更）の一覧があります。私は、ページヘッダが取っていないスペースの左に、ロゴ（スペースに表示するには多すぎるもの）を動的にフィットさせたい。

アプローチ：

• 隠すロゴ第

1）leftoverSpace = containerWdith - pageheaderWidth
2）ループ各ロゴを介し
3幅） 'leftoverSpace' 番号ひとたびループのストップに当たる。

これは私がこれまでに得たものです。それは正しくありませんが、私は試しています。

var pageheaderWidth = null; 
brandsbannerWidth = null; 
pageheaderWidth = $(".page_header h1").width() 
pageheaderWidth = pageheaderWidth + 40;  

brandsWidth = (960-pageheaderWidth)-10 

$(".brands_banner li").each (function(index) { 

brandsbannerWidth = $(this).width(); 

if(brandsbannerWidth == brandsWidth) 

$(this).show(); 

}); 

ヘルプは大歓迎です。前もって感謝します。

Answer 1

あなたのコードを見ることなく、良い答えを提供することは本当に難しいです。今、あなたの編集を見てみると

var logos = $('.logos'); 

logos.hide(); 

$.each(logos, function() { 

    var containerWidth = ...//define your variable here 
    var pageheaderWidth = ...//define your variable here 

    leftoverSpace = containerWidth - pageheaderWidth 

    if (leftoverSpace == yourThresholdHere) { 
     return false; 
    } 

    $(this).show(); 
}); 

---

EDIT

：

は

var pageheaderWidth = $(".page_header h1").width() + 40 //no need to declare it previously 
var brandsWidth = (960-pageheaderWidth)-10 

$(".brands_banner li").each (function(index) { 
     (condition here) 
}); 

Answer 2

シンプルオーバーフロー：隠されたが、それを正しくありません

私はあなたがこのようなものが必要だと思います。私はオーバーフローが要素全体を隠すわけではないという考えを持っていました。