0

On my page I have an unordered list with some list items that serve as links to load content into a div.

The art direction requires that the list items be fully justified to the left and right. I've written some JavaScript to figure out how wide the ul is and calculate the width of the individual li elements, divide the remaining space and push the elements to the left and right respectively. It works great.

Now we want to add another ul under the first with another set of links.

How can I repurpose my code to do the same work as before?

All the list items are styled display:inline; and they need to be fluid in width in the event a font on one browser is a little bigger than another.

Here's my HTML: (It's all run together to overcome the spacing issue with inline list elements)

<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>

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

EDIT

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

I've tried wrapping all the JavaScript in a $('#portfolio ul').each(... but that doesn't seem to work. It sets the spacing according to the first ul not both individually.

4

1 回答 1

0

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

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

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);   
});
于 2013-04-18T22:44:26.500 回答