jquery - 如何根据最长的内容宽度设置 li 的宽度

Question

我有一个无序列表，其内容是使用下面的代码从数据库中动态填充的

    StringBuilder output = new StringBuilder();
    int lastDepth = -1;
    int numUL = 0;

    foreach (DataRow row in dt.Rows)
    {
        int currentDepth = Convert.ToInt32(row["Depth"]);
        if (lastDepth < currentDepth)
        {
            output.Append("<ul class=\"dropdown\">");
            numUL++;
        }
        else if (lastDepth > currentDepth)
        {
            output.Append("</li></ul></li>");
            numUL--;
        }
        else if (lastDepth > -1)
        {
            output.Append("</li>");
        }
        output.AppendFormat("<li><span class=\"text\"><a href=\"{1}\" title={1}>{0}</a></span>", row["ApplicationName"], row["Url"]);

       lastDepth = currentDepth;
    }
    for (int i = 1; i <= numUL; i++)
    {
        output.Append("</li></ul>");
    }
    Literal1.Text = output.ToString(); 

在上面的代码中，“下拉列表”是我用来设置 ul 样式的类...一切正常......

上面的代码返回像这样的无序列表

<ul>Home
<li><a href="#">Country</a></li>
<li>State</li>
<li>City</li>
</ul>

我有更多的 ul 类似地来自数据库。问题是我需要将最长的内容宽度设置为 ul 下的 li 的宽度例如:上面的国家是最长的，所以“家”下所有里的宽度应该有相同的宽度....

样式在这里完成，以在外部 css 中创建一个美观的导航栏

ul.dropdown                         {text-align:left; position:relative;z-index:1; }

ul.dropdown li                      { font-weight: bold;border:1px solid green; float:left;color:white;background: black; }

ul.dropdown a:hover                 { color: white; }

ul.dropdown a:active                { color: white; }

ul.dropdown li a                    { text-align:left; display:inline; padding:4px;
                                      color:white;}

ul.dropdown li:last-child a         { border-right: none; } 


ul.dropdown li:hover                { background: orange; color: white; position:relative; }



.dropdown ul                        {  visibility:hidden; 

position:absolute;  left: 0; }

ul.dropdown ul li                   
{ font-weight: normal; background:black; color: white; float:left; }


ul.dropdown ul li a{color:White; border-right: none;display: inline-block; } 


ul.dropdown ul ul                   { left: 100px; top: 0; }

ul.dropdown li:hover > ul           { visibility: visible;}

提前致谢

Answer 1

您可以在加载文档后使用 JavaScript/jQuery 找到最大 li 元素的宽度，然后将所有列表元素的宽度设置为该值。

编辑:下面的代码将无法正常工作，因为 element.css('width') 返回“40px”。你必须把最后的“px”去掉。编辑 2:我已经修复了代码。

像这样:(将“li”选择器更改为您需要的任何内容)

$(document).ready(function() {
        var maxWidth = 0;
        var elemWidth = 0;
        $('li').each(function() {
            elemWidth = parseInt($(this).css('width'));
            if (parseInt($(this).css('width')) > maxWidth) {
                maxWidth = elemWidth;
            }
        });
        $('li').each(function() {
            $(this).css('width', maxWidth + "px");
        });
    });