jquery - 查找最长的 li 并将每个 li 设置为该长度

Question

我有一个带有按钮的下拉菜单，用于触摸屏应用程序。我的 li 是内联的，因为我把它们变成了按钮。我不能让它们显示 block 或内联 block 。他们必须是内联的。所以它几乎是这样设置的......

<ul>
    <!-- ko foreach: Options -->
        <li role="presentation" class='item'><a class='btn btn-primary dropdownBtn' role="menuitem" tabindex="-1" data-bind="html: Name">&nbsp;</a></li>
    <!-- /ko -->
</ul>

这对于显示的元素来说效果很好，但是每个元素都有自己的宽度，并且在列表中看起来很奇怪且不匹配。所以我一直在尝试做的是找到最长的 li，然后将其余的 li 设置为该长度，这样它们就会均匀。

我不能在这里走简单的路线并设置最小或最大宽度，因为这些是动态列表，我不知道它们会生成什么。

到目前为止，我一直在尝试这样的事情。

//This grabs each li based on the dropdown that is clicked on.
var lis = $(event.currentTarget).next().find('li');

然后我试图遍历该列表中的每一个并找到宽度

var maxWidth = 0;
var elemWidth = 0;
    $(lis).each(function() {
        elemWidth = parseInt($(this).css('width'));
        if (parseInt($(this).css('width')) > maxWidth) {
            maxWidth = elemWidth;
        }
    });

但是宽度一直返回 0，即使它显然附加了一个宽度，否则它不会显示或显示得很奇怪。我能够在控制台中获取值，但无论我在这里尝试什么，它都会一直返回 0。

我已经尝试获取 outerWidth 或仅获取 width()，但它们要么返回 0，要么导致错误，指出那里不能有函数。这是我认为我的主要问题所在。

然后我会将 li 设置为正确的宽度。

$(lis).each(function() {
    $(this).css('width', maxWidth + "px");
});

任何帮助都会很棒!我正式卡住了!

Answer 1

您可以使用 Math.max 获取 li 的最大宽度:

var maxW = Math.max.apply(Math, $('li').map(function(){ return $(this).width(); }).get());

Fiddle

并使用 $("li").width(maxW); 设置所有 li 的宽度；

Fiddle - get and set max width

作为引用:jQuery get max width of child div's