javascript - 将一些 Javascript 重新用于类似的 DOM 元素

Question

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

艺术指导要求列表项左右对齐。我已经编写了一些 JavaScript 来计算 ul 的宽度并计算各个 li 元素的宽度，划分剩余空间并将元素推到左侧，分别对。效果很好。

现在我们要在第一个链接下添加另一个 ul 和另一组链接。

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

所有列表项的样式都是 display:inline;，如果一种浏览器上的字体比另一种浏览器上的字体稍大，则它们的宽度需要不固定。

这是我的 HTML:(它们一起运行以克服内联列表元素的间距问题)

<div id="portfolio">
    <ul class="stacked-nav-top">
        <li class="project_link">
            <a href="#" class="project_class planning" id="commercial-industrial" title="Commercial Industrial Projects">
                Commercial &amp; Industrial
            </a>
        </li>
        <li class="breaker">//</li>
        <li class="project_link">
            <a href="#" class="project_class planning" id="government-institutional" title="Government Institutional Projects">
                Government &amp; Institutional
            </a>
        </li>
        <li class="breaker">//</li>
        <li class="project_link">
            <a href="#" class="project_class planning" id="affordable-housing" title="Affordable Housing Projects">
                Affordable Housing
            </a>
        </li>
        <li class="breaker">//</li>
        <li class="project_link">
            <a href="#" class="project_class planning" id="multi-family-housing" title="Multi-family Housing Projects">
                Multi-family Housing
            </a>
        </li>
    </ul>
</div>

还有我的 JavaScript:

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

编辑

我的 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 包装在 $('#portfolio ul').each(... 中，但这似乎不起作用。它根据首先 ul 不是单独的。

Answer 1

我不太确定明白你想要什么，但是，如果您想对您的部分的每个 ul 重复操作，则必须循环每个 ul，然后进行计算。

此处演示，尊重您的 HTML 内联语法(内联 block 问题)。

http://jsfiddle.net/ggX2r/2/

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