Determining first and last element for each level in django-mptt

Question

I am using django mptt to display navigational menu.

{% load mptt_tags %}
<ul class="nav_menu">
    {% recursetree nav_link.get_descendants %}
        {% if node.is_shown %}
            <li>
                <a href="{{ node.url }}">{{ node.title }}</a>
                {% if not node.is_leaf_node %}
                    <ul class="nav_menu">
                        {{ children }}
                    </ul>
                {% endif %}
            </li>
        {% endif %}
    {% endrecursetree %}
</ul>

Is there a way to mark each first child of each nav_menu with a class first-child and to mark each last child of each nav_menu with a class last-child?

For example:

<ul class="nav_menu">
    <li class="first-child">
        <a href="">Node 1</a>
        <ul class="nav_menu">
           <li class="first-child last-child">
              <a href="">Node 1.1</a>
           </li>
        </ul>
    </li>
    <li>
        <a href="">Node 2</a>
        <ul class="nav_menu">
           <li class="first-child">
              <a href="">Node 2.1</a>
           </li>
           <li class="last-child">
               <a href="">Node 2.2</a>
           </li>
        </ul>
    </li>
    <li class="last-child">
        <a href="">Node 3</a>
    </li>
</ul>

Answer 1

A node can know whether or not it is the first or last at its level by querying get_previous_sibling and get_next_sibling.

<a class="{% if not node.get_previous_sibling %}first_child {% endif %}{% if not node.get_next_sibling %}last_child{% endif %} href="{{ node.url }}">{{ node.title }}</a>

These calls should work on the node cache, so won't hit the database. However, CSS already has pseudo-selectors for first-child and last-child, so it might be better to just do any styling using those rather than with explicit classes unless you're targeting older browsers.

Answer 2

If not all items in the database should be shown depending on a calculated value for each node, then first item and last item in the database don't necessary match first item and last item in the list. In this case, the first item and last item can be marked by javascript/jquery:

$(document).ready(function() {
    $('.nav_menu li:first-child').addClass("first-child");
    $('.nav_menu li:last-child').addClass("last-child");
});