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标签。我需要它来计算当前parrent项目ul中的li标签。

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

Answer 1

是那样的？

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

请详细解释，您正在尝试做什么

Answer 2

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

但是在缺少更多信息的情况下，您需要使用递归函数（以及<ul>与父项匹配）深入所有嵌套$.closest()标记，然后在其上设置属性相应的<ul>标记，以避免解析它两次。

通过这种方式，您可以影响该网页上的所有<ul> - <li>结构，而无需担心其数量或嵌套程度。

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

Answer 3

我终于设法解决了这个问题。因为菜单是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循环遍历多个ul标签并根据li标签设置唯一宽度

3 个答案: