Home/ Questions/Q 7745511
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T10:02:32+00:00

my heading kinda explains the problem. I need to loop through multiple ul tags

  • 0

my heading kinda explains the problem. I need to loop through multiple ul tags and get the width of the li tags, so i can set the width of the ul tag.

This is my jquery code: 

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

and this is my 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>

Can right now the jQuery counts all li tags that is inside parrent-item ul. I need it to count the li tags inside the current parrent-item ul.

Edit: I’m trying to count the width of each li inside a ul with the class of “parent-item” item and then set the width of the current ul item.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I finally managed to fix this. Because the menu is display:none when the page loads i cant get the width of li element width. So i had to initialize it on hover. This is my 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;
    });
});
    • 0