为类似的DOM元素重新调整某些Javascript的用途

在我的页面上，我有一个无序列表，其中包含一些列表项，这些列表项用作将内容加载到div中的链接

艺术方向要求列表项左右完全对齐。我编写了一些JavaScript来计算

ul

的宽度，并计算单个

li

元素的宽度，划分剩余的空间，然后分别将元素向左和向右推。它工作得很好

现在我们想在第一个链接下添加另一个

ul

，并添加另一组链接

如何重新调整代码的用途以完成与以前相同的工作

所有列表项的样式均为

display:inline并且如果一个浏览器上的字体比另一个浏览器上的字体稍大，则它们的宽度必须流畅

这是我的HTML：（它一起运行以克服内联列表元素的间距问题）

编辑

我的CSS：

section#portfolio ul {
    display:block;
    width:820px;
    text-align:center;
}
.stacked-nav-top {
    border-top:solid 1px rgba(97,58,17,.3);
    margin:0px;
    background:transparent url(images/dotted_line_820.png) center 19px no-repeat;
    padding:10px 0px;   
}
.stacked-nav-bottom {
    border-bottom:solid 1px rgba(97,58,17,.3);
    padding-bottom:10px;
    margin:10px 0px 15px 0px;
}
section#portfolio ul li {
    display:inline;
    font:lighter .65em "Tahoma", "Geneva", sans-serif;
    color:rgb(145,145,145);
    text-transform:uppercase;
}
section#portfolio ul li.breaker {
    display:inline-block;
    text-align:center;
}

我已经尝试将所有JavaScript包装在一个
$（“#公文包ul”）中。每个（…
）似乎都不起作用。它根据第一个
ul
设置间距，而不是两个单独设置。
我不太确定您想要什么，但是，
如果你想在你的部分的每个ul上重复这个操作，你必须在每个ul上循环，然后进行计算

在这里演示，尊重您的HTML内联语法（内联块问题）


//在一个文档内。couse的就绪范围。。。
$（'#公文包ul'）。每个（功能（）{
var linkwidth=0，
残存物
断裂宽度；
//*这*指的是您的投资组合中当前的
孩子。
$（'li.project_link'，this）.each（function（）{
//*此*现在指的是您当前的元素
linkwidth+=$（this）.outerWidth（）；
});
剩余=（$（'#公文包ul'）.outerWidth（）-linkwidth）；
breakerwidth=数学楼层（（剩余/3））；
$（'li.breaker'，this）.css（'width'，breakerwidth）；
});
你能添加你的CSS部分吗？添加了CSS。谢谢你的提醒。@Lee Taylor，谢谢你让我的HTML可读。任何人回答这个问题，请注意，我在一个字符串中一起运行我的
li
代码，以避免这里讨论的内联元素间距问题：好的，我只是用一个元素替换了你的代码，以使它更协调我对你的CSS感兴趣。@Ofeargall-我注意到在我做了更改之后。我想这会更有用，因为我已经编辑了它。你可以随时回滚我的编辑。工作得很好。当我尝试每个循环时，我没有将我的变量分组在一起。我想知道这是否是导致我失败的原因…不是真的，这只是JSLi鼓励的一个好做法nt！主要的事情是先在每个
上循环，然后在每个内部循环，而不是直接在每个内部循环！
$(function()
{
    var linkwidth = 0;
    $('#portfolio ul li.project_link').each(function() 
    {
        linkwidth += $(this).outerWidth()
    });

    var leftover = ($('#portfolio ul').outerWidth() - linkwidth);
    var breakerwidth = Math.floor((leftover / 3));
    $('#portfolio ul li.breaker').css('width', breakerwidth);
});

section#portfolio ul {
    display:block;
    width:820px;
    text-align:center;
}
.stacked-nav-top {
    border-top:solid 1px rgba(97,58,17,.3);
    margin:0px;
    background:transparent url(images/dotted_line_820.png) center 19px no-repeat;
    padding:10px 0px;   
}
.stacked-nav-bottom {
    border-bottom:solid 1px rgba(97,58,17,.3);
    padding-bottom:10px;
    margin:10px 0px 15px 0px;
}
section#portfolio ul li {
    display:inline;
    font:lighter .65em "Tahoma", "Geneva", sans-serif;
    color:rgb(145,145,145);
    text-transform:uppercase;
}
section#portfolio ul li.breaker {
    display:inline-block;
    text-align:center;
}

// Inside a document.ready scope of couse...
$('#portfolio ul').each(function () {
    var linkwidth = 0,
        leftover,
        breakerwidth;

    // *this* refers to your current <ul> child of your #portfolio.
    $('li.project_link', this).each(function() {
        // *this* refers now to your current <li.project_link> element
        linkwidth += $(this).outerWidth();
    });
    leftover = ($('#portfolio ul').outerWidth() - linkwidth);
    breakerwidth = Math.floor((leftover / 3));

    $('li.breaker', this).css('width', breakerwidth);   
});