jQuery Проход по нескольким тегам ul и установка уникальной ширины на основе тегов li - PullRequest
Новая
       49

jQuery Проход по нескольким тегам ul и установка уникальной ширины на основе тегов li

0 голосов
/ 29 марта 2012

мой заголовок как бы объясняет проблему. Мне нужно перебрать несколько тегов 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 считает все теги li внутри parrent-item ul. Мне это нужно для подсчета тегов li внутри текущего элемента parrent ul.

Редактировать: Я пытаюсь подсчитать ширину каждого li внутри ul с помощью класса элемента parent-item, а затем установить ширину текущего элемента ul.

Ответы [ 3 ]

1 голос
/ 29 марта 2012

как это? 

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

объясните, пожалуйста, что вы пытаетесь сделать

0 голосов
/ 30 марта 2012

Мне наконец-то удалось это исправить. Поскольку меню отображается: нет, когда страница загружается, я не могу получить ширину ширины элемента 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;
    });
});
0 голосов
/ 29 марта 2012

Это похоже на проблему с макетом, поэтому, скорее всего, у нее будет хотя бы одно решение на основе CSS.

Но при отсутствии дополнительной информации вам придется погрузиться во все вложенные <ul>теги с рекурсивной функцией (наряду с $.closest() для соответствия родительскому элементу), затем установите атрибут для соответствующего тега <ul>, чтобы избежать его повторного анализа.

Таким образом, вы сможете повлиять на все<ul> - <li> структур на этой странице, не беспокоясь об их количестве или глубине их вложения.

Но, опять же, у вас, скорее всего, будет исправление на основе CSS.

...