jQuery循环通过多个ul标记，并基于li标记设置唯一宽度

我的标题可以解释这个问题。我需要循环通过多个ul标签并获得li标签的宽度，以便设置ul标签的宽度

这是我的jquery代码：

    var ul_width = 0;
var li_width = 0;
$('#menu-topp-meny .parent-item').each(function(){
    $('#menu-topp-meny .parent-item ul').each(function(){
        $('li').each(function(){
            li_width += $(this).width();
        });
        ul_width = li_width;
        $(this).css({'width': ul_width + 'px'});
        li_width = 0;
        ul_width = 0;
    });
});

这是我的html：

<nav class="menu-topp-meny-container">
    <ul id="menu-topp-meny" class="menu">
        <li id="menu-item-116" class="parent-item"><a href="http://test3.clydemarketing.com/om-monster-2/">Om Monster</a>
            <ul class="sub-menu">
                <span class="sub-centering">
                    <li id="menu-item-262"><a href="http://test3.clydemarketing.com/entertainment/om-oss/">Om Oss</a></li>
                </span>
            </ul><span class="sub-menu-wrapper"></span>
        </li>
        <li id="menu-item-225" class="parent-item"><a href="http://test3.clydemarketing.com/entertainment/om-oss/">Avdelinger</a>
            <ul class="sub-menu"><span class="sub-centering">
                <li id="menu-item-263"><a href="http://test3.clydemarketing.com/entertainment/produksjoner/">Entertainment</a></li>
                <li id="menu-item-260"><a href="http://test3.clydemarketing.com/entertainment/kontakt/">Kontakt</a></li>
                <li id="menu-item-261"><a href="http://test3.clydemarketing.com/entertainment/arkiv/">Arkiv</a></li>
            </ul></span><span class="sub-menu-wrapper"></span>
        </li>
        <li id="menu-item-26"><a href="http://test3.clydemarketing.com/kontakt/">Kontakt</a></li>
        <li id="menu-item-25"><a href="http://test3.clydemarketing.com/jobb/">Jobb</a></li>
    </ul>
</nav>

现在，jQuery可以统计parrent item ul中的所有li标记。我需要它来计算当前项目ul中的li标签

编辑：我正在尝试使用“父项”项目类别计算ul中每个li的宽度，然后设置当前ul项目的宽度

像那样

var ul_width = 0;

$('#menu-topp-meny .parent-item').each(function(){
    $('#menu-topp-meny .parent-item ul').each(function(){
        var li_width = 0;
        $(this).find('li').each(function(){
            li_width += $(this).width();
        });
        ul_width+= li_width;
        $(this).css({'width': ul_width + 'px'});
        li_width = 0;
        ul_width = 0;
    });
});

---

请进一步解释，您试图做什么这听起来像是一个布局问题，因此可能至少有一个基于CSS的解决方案

但是在没有更多信息的情况下，您需要使用递归函数深入到所有嵌套的

标记中（以及

$.nexist（）

以匹配父标记），然后在相应的

标记上设置一个属性以避免对其进行两次解析

这样，您就可以影响该页面上的所有

-

结构，而不必担心它们的数量或嵌套的深度

---

但话说回来，您很可能会有一个基于CSS的修复。

我终于设法修复了这个问题。因为菜单是display:none当页面加载时，我无法获得li元素宽度的宽度。所以我必须在悬停状态下初始化它。这是我的jQuery：

    var li_width = 0;
$('#menu-topp-meny .parent-item').hover(function() {
    $('ul', $(this)).each(function(){
        $('li', $(this)).each(function(){
            li_width += $(this).outerWidth();
        });
        $(this).css({'width': li_width + 'px', 'margin': '0px auto'});
        $('span', $(this)).css({'left': 50-li_width/2 + 'px', 'position': 'absolute', 'width': li_width + 'px'});
    li_width = 0;
    });
});

---

我在底部加了一个额外的解释，这对你有帮助吗？谢谢你给我指出了正确的方向，我终于解决了。已在下面发布我的Jquery解决方案。：）