确定 django-mptt 中每个级别的第一个和最后一个元素

发布于 2024-12-28 11:05:03 字数 1522 浏览 0 评论 0原文

我正在使用 django mptt 显示导航菜单。

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

有没有办法用类 first-child 标记每个 nav_menu 的每个第一个子元素，并用类 nav_menu 标记每个 nav_menu 的最后一个子元素类最后一个孩子？

例如：

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

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

流云如水 2025-01-04 11:05:03

一个节点可以通过查询get_previous_sibling和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>

这些调用应该在节点缓存上工作，因此不会访问数据库。但是，CSS 已经具有用于第一个子级和最后一个子级的伪选择器，因此最好使用它们而不是显式类来进行任何样式设置，除非您针对的是较旧的浏览器。

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.

回复收藏 0 原文

甜警司 2025-01-04 11:05:03

如果数据库中的所有项目不应根据每个节点的计算值来显示，则数据库中的第一个项目和最后一个项目不必与列表中的第一个项目和最后一个项目匹配。在这种情况下，第一项和最后一项可以通过 javascript/jquery 来标记：

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

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

回复收藏 0 原文

~没有更多了~