2012-01-20 17 views
0

私はdjango mpttを使ってナビゲーションメニューを表示しています。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のそれぞれ最初の子をマークすると、クラスlast-childnav_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> 

答えて

2

ノードがget_previous_siblingget_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はすでに幼児と幼児の擬似セレクタを持っているので、古いブラウザを対象としていない限り、明示的なクラスではなくスタイリングを使用する方が良いかもしれません。

+0

+1 – Soask

0

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

$(document).ready(function() { 
    $('.nav_menu li:first-child').addClass("first-child"); 
    $('.nav_menu li:last-child').addClass("last-child"); 
}); 
関連する問題