Ninedays Blog

First, Last and Only with Nested Lists

Apply first and last to the parent list | apply first and last to nested lists

Again, this example would most likely be used on the load of the document, not using buttons or links to effect the list. The code for applying the first/last/only to a list would look like this:

Code for First, Last and Only in Nested Lists

JavaScript

<script type="text/javascript">
    Event.observe(window, 'load', function() {
        $('nav-box').down('ul').immediateDescendants().first().addClassName('first');
        $('nav-box').down('ul').immediateDescendants().last().addClassName('last');
        var myArray = $('nav-box').down('ul').immediateDescendants();
        for (var index = 0, len = myArray.length; index < len; ++index) {
            var item = myArray[index];
            // check to see if there is a nested list, or else you will get an error
            if($(item).down('ul')){
                // check to see if there are immediateDescendants, or else you will get an error
                if($(item).down('ul').immediateDescendants().size() > 1){
                    $(item).down('ul').immediateDescendants().first().addClassName('first');
                    $(item).down('ul').immediateDescendants().last().addClassName('last');
                } else if($(item).down('ul').immediateDescendants().size() == 1){
                    // if there is only one item, what should it do, apply the just one class or both, your call
                    $(item).down('ul').immediateDescendants().first().addClassName('only');
                }
            }
        }
    });
</script>

HTML

<div id="nav-box">
    <ul>
        <li>First is the worst
            <ul>
                <li>go 1-1</li>
                <li>go 1-2</li>
                <li>go 1-3</li>
            </ul>
        </li>
        <li>Second is the best
            <ul>
                <li>welcome 2.1</li>
                <li>you might be 2.4 but you're 2.2</li>
                <li>the last of the 2's - 2.3</li>
            </ul>
        </li>
        <li>Third is the one in the polka dot dress (third has no sublist)</li>
        <li>Fourth is the one…what do you mean it doesn't go up to four
            <ul>
                <li>go 4-1</li>
            </ul>
        </li>
    </ul>
</div>

Sample CSS

<style type="text/css">
    #nav-box ul li.first { border-left: 1px solid #996633; /* red left */}
    #nav-box ul li.last { border-right: 1px solid #339933; /* green right */}
    #nav-box ul li ul li.first { border-left: 1px solid #336699; /* blue left */}
    #featurebox-2 ul li ul li.last { border-right: 1px solid #663399; /* purple right */}
    #nav-box ul li ul li.only { border-bottom: 1px solid #669933; /* green bottom */}
</style>

For a sample like that you may actually want the styles to apply only if the nav-box element loads so if there are pages where the nav does not exist, but the script is in a header or other common file, you would add this line: Event.observe('nav-box', 'load', function() { afterEvent.observe(window, 'load', function() { and nest the code inside a 2nd level 'iffer'.

Easy enough huh?

Summary

Prototype Functions Used

• Array.first()
• Array.last()
• Element.addClassName()
• Element.down()
• Element.immediateDescendants()
• Element.removeClassName()
• Event.observe