通過與jinja和jQuery的HTML列表循環？

Question

我正在一個網頁，遍歷一些JSON和返回的名單上：

{% for name in names %} 
    <li class="active"><span>{{results['Name']}</span></li> 
{% endfor %} 

然後使用jQuery，我使用的下一個允許用戶循環通過列表一次一個和上一個按鈕：

$(document).ready(function(e) { 
    // Moves to the next elem, or goes to the first one 
    // if you're on the last 
    $.fn.nextOrFirst = function (selector) { 
     var next = this.next(selector); 
     return (next.length) ? next : this.prevAll(selector).last(); 
    }; 

    // Moves to the previous elem, or moves to the end of 
    // the list of you're on the first 
    $.fn.prevOrLast = function (selector) { 
     var prev = this.prev(selector); 
     return (prev.length) ? prev : this.nextAll(selector).last(); 
    }; 

    $('.moveLi').click(function() { 
     var active = $('.active'); 

     if(active.is(':animated')) return; 

     if($(this).hasClass('next')) { 
      active.fadeOut(function() { 
       $(this) 
       .removeClass('active') 
       .nextOrFirst() 
       .addClass('active') 
       .fadeIn(); 
      }); 
     } else { 
      active.fadeOut(function() { 
       $(this) 
       .removeClass('active') 
       .prevOrLast() 
       .addClass('active') 
       .fadeIn(); 
      }); 
     } 
    }); 
}); 

我現在遇到的問題是，整個列表負載，我經過第一點幾下整個列表循環頁面;那麼，我可以循環個別名稱。任何關於如何解決這個問題的指針？

Answer 1

謝謝cdvv7788指引我在正確的方向。我將以下內容添加到我的HTML中：

<li class="{% if name == names[0]%}active{%else%}test{% endif %}">