javascript - 如何从 <ul> 获取每个 "column"的最大 <li> 宽度

Question

介绍

你好，

我有一个用列表制作的表格 <ul>那looks like this .

如你所见，我添加了getMaxLiWidth()实现最大<li>所有人的宽度。

之前

# | Name | Extra

1 | This is a very big name | Extra

我想要什么

# | Name | Extra

1 | This is a very big name | Extra

我得到了什么

# | Name | Extra

问题

我需要如何更改我的 getMaxLiWIdth()获得每个“列”的最大宽度？

Answer 1

您需要为最宽列中的所有列表项设置 css。首先，您必须确定最宽的列，然后以最大宽度返回它，然后将其用作选择器的一部分。

function getMaxLiWidth() {
    var maxWidth = 0;
    var column = 0;
    $('li').each(function() {
        if (this.offsetWidth > maxWidth) {
            maxWidth = this.offsetWidth;
            column = $(this).index();
            console.log(column);
        }
    });
    return [maxWidth,column];
}

$(function() {

    var arr = getMaxLiWidth();
    $('li:nth-child(' + (arr[1] + 1) + ')').each(function() {
        $(this).css({
            'width': arr[0]
        });
    });
});

这是一个演示:http://jsfiddle.net/Dcd7R/2/