我应该如何编辑我的JavaScript，以便能够单击html列表？

Question

I have a list that I would like users to click through using next and previous. For some reason, my current code isn't working as it should. It's not doing anything. When users select next, I would like for it to show the next item and vice versa.

HTML:

{% extends "layout.html" %}
    {% block content %}
    <div class="jumbo">
      <div class ="results" align="center">
       <h1>Test </h1>
        <ul class = "food_choice" style="list-style: none;">
           <li><span>{{search_results}}<br/> Rating: {{search_results1}}<br/><a     href="{{search_results2}}"> Check out {{search_results}} on Yelp</a><br/>{{search_results3}}<br/>{{search_results4}}<br/>{{search_results5}}</span></li>
           <li><span>{{search_results6}}<br/> Rating: {{search_results7}}<br/><a href="{{search_results8}}"> Check out {{search_results6}} on Yelp</a><br/>{{search_results9}}<br/>{{search_results10}}<br/>{{search_results11}}</span>         </li>     
        </ul>
         <button class="next" type="button">Next</button>
         <button class="back" type="button">Back</button>
       </div>
    </div> 

{% endblock %}

Javascript:

<script>
    $('.results').each(function() {

        $(this).find('li').first().siblings().hide();

        $(this).find('.next').click(function () {
            $(this)
                .parent('.results')
                .find('li:first-child')
                .fadeOut(function () {
                $(this)
                    .next()
                    .fadeIn()
                $(this)
                    .appendTo($(this).parent())
            });

        });

        $(this).find('.back').click(function () {
           $(this)
            .parent('.results')
            .find('li:food_choice')
            .fadeOut(function () {
                $(this)
                .parent()
                .find('li:last-child')
                .fadeIn()
                .prependTo($(this).parent())
            });
        });

    });
</script>

Answer 1

Something along the lines of this should work:

$(".results").each(function(){
    var results = $(this);
    results.find(".next").click(function(){
        results.find("li").each(function(){
            if($(this).hasClass("active") && $(this).next().length > 0)
            {
                $(this).removeClass("active");
                $(this).next().addClass("active");
            }
        });
    });
    results.find(".back").click(function(){
        results.find("li").each(function(){
            if($(this).hasClass("active") && $(this).prev().length > 0)
            {
                $(this).removeClass("active");
                $(this).prev().addClass("active");
            }
        });
    });
});