CODEWITHSUNDEEP
jquerypythonflask
Ashley Dominique
Ashley Dominique

Reputation: 33

Cycle through an HTML list with jinja and jQuery?

I'm working on a web page that iterates through some JSON and returns a list of names:

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

Then using jQuery, I'm allowing the users to cycle through the list one at a time using next and previous buttons:

$(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();
            });
        }
    });
 });

The issue I'm encountering is that the entire list loads to the page and I'm cycling through the entire list for the first few clicks; then, I'm able to cycle through individual names. Any pointers on how I can fix this?

Upvotes: 1

Views: 112

Answers (1)

Ashley Dominique
Ashley Dominique

Reputation: 33

Thanks cdvv7788 for pointing me in the right direction. I added the following to my HTML:

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

Upvotes: 1

Related Questions