jquery - 循环遍历元素的宽度并显示元素，直到满足某个宽度

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

简单的溢出：隐藏正确地做到了。我有一些想法，溢出不会隐藏整个元素，只是其中的一部分。

Answer 2

如果不查看您的代码，很难提供一个好的答案。

我会说你需要这样的东西：

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

---

编辑

现在查看您的编辑：

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