jquery - 使用 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 %}">