JQuery одинаково разнесенные навигационные ссылки внутри неупорядоченного списка задач - PullRequest
Новая
       10

JQuery одинаково разнесенные навигационные ссылки внутри неупорядоченного списка задач

1 голос
/ 29 июня 2011

Я пишу сценарий JQuery, который равномерно размещает горизонтальные навигационные ссылки переменного размера внутри содержащей <ul>, используя margin-right. Алгоритм:

A: Получить ширину <ul> контейнера.

B: добавить ширину всех <li> элементов внутри контейнера.

C: вычислить правое поле для каждого предмета, кроме последнего <li>, вычтя B из A и разделив на количество <li> предметов в контейнере, минус 1.

Но в моем алгоритме или в моем коде есть недостаток, потому что ссылки переполняют контейнер. Вот мой код Можете ли вы помочь, пожалуйста?

* +1015 * Спасибо, -Northk 
    var containerWidth = $('#main-nav ul').width();
    var linksWidth = 0;
    $('#main-nav ul').children().each(function() {
        linksWidth += $(this).width();
    });
    var linkSpacing = Math.floor((containerWidth - linksWidth) / ($('#main-nav ul').children().length - 1));
    $('#main-nav ul').children().css('margin-right', linkSpacing + "px");
    $('#main-nav ul').children().filter(":last").css('margin-right', 0);

А HTML выглядит так: 

<nav id="main-nav">
<ul>
<li>
<a href="#">home</a>
</li>
<li>
<a href="#">link-number-2</a>
</li>
</ul>
</nav>

Ответы [ 3 ]

2 голосов
/ 29 июня 2011

Я только что принял некоторые правила CSS, но я верю, что это то, что вы искали.http://jsfiddle.net/TEDhb/

$('#main-nav ul li:not(:last-child)').css('margin-right', linkSpacing + "px");
1 голос
/ 29 июня 2011

Ненавижу это говорить, но у меня все работает нормально. Вот jsFiddle для него (я предположил минимальный CSS). Верхняя часть кода - это ваш код (который работает), нижняя закомментированная часть - моя версия (которая ничего не добавляет, но более эффективна).

0 голосов
/ 29 июня 2011

Вы должны делить на количество LI, а не на количество LI-1.

...