jQuery - Usable List

Turns a regular list of n levels deep into a usable one by adding classes to the following: -Every first and last list item -All list items that have inner lists -Adds a class to all inner lists that shows that lists depth in the tree E.g. All lists 1 level down get the class "level1", all lists two levels down get the class"level2" and so on.

by gavinfoley

HTML

<ul class="mobileNav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li>
        <a href="#">News</a>
        <ul>
            <li><a href="#">Lvl.1 Page 1</a></li>
            <li>
                <a href="#">Lvl.1 Page 2</a>
                <ul>
                    <li><a href="#">Lvl.2 Page 1</a></li>
                    <li><a href="#">Lvl.2 Page 2</a></li>
                    <li><a href="#">Lvl.2 Page 3</a></li>
                    <li><a href="#">Lvl.2 Page 4</a></li>
                    <li><a href="#">Lvl.2 Page 5</a></li>
                    <li><a href="#">Lvl.2 Page 6</a></li>
                </ul>
            </li>
            <li><a href="#">Lvl.1 Page 3</a></li>
            <li><a href="#">Lvl.1 Page 4</a></li>
            <li><a href="#">Lvl.1 Page 5</a></li>
            <li><a href="#">Lvl.1 Page 6</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Sitemap</a></li>
</ul>

JavaScript

$.fn.usableList = function (options) {

        var defaults = {
            listType: "ul",
            listItemType: "li",
            firstListItemClass: "first",
            lastListItemClass: "last",
            counterPrefix: "level",
            counter: 1,
            hasInnerListClass: "hasList"
        };

        options = $.extend(defaults, options);

        return this.each(function () {
            var $this = $(this);
            $this.find(options.listItemType + ':first-child').addClass(options.firstListItemClass);
            $this.find(options.listItemType + ':last-child').addClass(options.lastListItemClass);
            findAllLists($this, 1);
        });

        // recursive function to find all inner ul's
        function findAllLists($selector, count) {
            if (!$selector.length) return;

            $selector.each(function (index, element) {
                var tempCounter = count;
                // Store our current jquery objects
                var $curList = $selector.children(options.listItemType + ':has(' + options.listType + ')').children(options.listType);
                if ($curList.length) {
                    $curList.addClass(options.counterPrefix + tempCounter);
                    $curList.parent().addClass(options.hasInnerListClass);
                    tempCounter++;
                    $curList.each(function (index, element) {
                        // Call the function one down the line...
                        findAllLists($(element), tempCounter);
                    });
                }
            }); // close $selector.each
        }
    };

    $('ul.mobileNav').usableList({
        listType: "ul",
        listItemType: "li",
        firstListItemClass: "first",
        lastListItemClass: "last",
        counterPrefix: "level",
        counter: 1,
        hasInnerListClass: "hasList"
    });