django-mptt의 각 레벨에 대한 첫 번째 요소와 마지막 요소 결정

Question

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

Answer 1

노드는이 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에는 첫 번째 자식과 마지막 자식을위한 의사 선택기가 이미 있으므로 이전 브라우저를 타겟팅하지 않는 한 명시 적 클래스가 아닌 스타일을 사용하여 스타일을 변경하는 것이 좋습니다.

Answer 2

각 노드의 계산 된 값에 따라 데이터베이스의 모든 항목을 표시하지 않는 경우 데이터베이스의 첫 번째 항목과 마지막 항목이 목록의 첫 번째 항목과 마지막 항목과 일치 할 필요는 없습니다. 이 경우 첫 번째 항목과 마지막 항목은 javascript/jquery로 표시 할 수 있습니다.

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