jquery在调整窗口大小时计算元素大小答案

【问题标题】：jquery calculate element size whilst resizing windowjquery在调整窗口大小时计算元素大小
【发布时间】：2013-01-24 05:56:08
【问题描述】：

我希望有人可以帮助解决这个问题。

我编写了一个函数，它根据现有列表项的数量和父容器中的剩余宽度为导航中的最终 li 项添加宽度。

这适用于文档加载，如果文档被调整大小并单击 href，但在实际调整大小期间不会重新计算元素的大小。

我创建了一个fiddle 来帮助说明这一点。

有谁知道在调整窗口大小时如何动态进行计算？

这是js

 $(document).ready(calcWidth);
$(document).resize(calcWidth);

function calcWidth(){
    // get array of all the list items in the nav
    var $listWidth = $('ul#main-nav li').map(function(){
        return $(this).width();
    }).get();
    var $itemCount = $('#main-nav li').length; //this works as margin-right is set to 1px
    var $contWidth = $('#main-nav').width(); // get the full container width
    var $sum = 0;
    $.each($listWidth,function(){$sum+=parseFloat(this) || 0;});
    $('ul#main-nav li.final a').css({
        width:  $contWidth - $sum - $itemCount, //set the width of the final li to be the total container minus the sum of the existing li elements
        height: '12px'
    });
}

如果您需要在此处发布更多代码，请告诉我，但这一切都在小提琴中。

谢谢卢克

【问题讨论】：

我一直在努力做到这一点，不介意知道这个秘密。

标签： jquery html css resize drag

【解决方案1】：

您无需使用 javascript 执行此操作。

移动UL上的clearfix类（因为列表项是浮动的），在UL上添加紫色背景，列表项加一个1px的白色右边框。并且您可以删除最后一个 LI。

See it here

【讨论】：

谢谢。我叉了你的小提琴！