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>

それぞれの最初の子をnav_menuクラスfirst-childでマークし、それぞれの最後の子をnav_menuクラスでマークする方法はありlast-childますか?

例えば：

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

2 に答える 2

2

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にはすでに最初の子と最後の子の疑似セレクターがあるため、古いブラウザーを対象としている場合を除き、明示的なクラスではなく、それらを使用してスタイル設定を行う方がよい場合があります。

于 2012-01-20T14:44:04.747 に答える
0

各ノードの計算値に応じてデータベース内のすべてのアイテムを表示する必要がない場合、データベース内の最初のアイテムと最後のアイテムが、リスト内の最初のアイテムと最後のアイテムと一致する必要はありません。この場合、最初のアイテムと最後のアイテムは javascript/jquery でマークできます。

$(document).ready(function() {
    $('.nav_menu li:first-child').addClass("first-child");
    $('.nav_menu li:last-child').addClass("last-child");
});
于 2012-01-24T15:38:32.677 に答える