jQuery 循环遍历多个 ul 标签并根据 li 标签设置唯一宽度

Question

我的标题有点解释了这个问题。我需要遍历多个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 项的宽度。

Answer 1

我终于设法解决了这个问题。因为菜单是 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;
    });
});

Answer 2

这听起来像是一个布局问题，所以它可能至少有一个基于 CSS 的解决方案。

但在没有更多信息的情况下，您需要使用递归函数深入所有嵌套的 <ul> 标签（连同 $.closest() 以匹配父标签），然后在相应的 <ul> 上设置一个属性标记以避免对其进行两次解析。

这样您就可以影响该页面上的所有<ul> - <li> 结构，而不必担心它们的数量或嵌套的深度。

但话又说回来，您可能有一个基于 CSS 的修复程序。

Answer 3

喜欢吗？

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;
    });
});

请解释一下，你要做什么