如何从<ul>获取每个“列”的最大<li>宽度</ul> </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/

Answer 2

您需要在此处为​​每列添加不同的格式。只需尝试CSS