How To to use Next() and Prev()

How To to use Next() and Prev()

I'm trying to develop an elegant way to traverse a JSON object. The code below produces 15 records in the <div> with id="what". What I'm trying to do is show each record, one at a time,  upon pressing a next or previous button. My last post here alluded to that but my solution was really bad.

I've been reading up on the next() and prev() methods and am trying to figure out how to do this using them.  Do I have to do something like create a separate <div>  with the same class for each record and then traverse through them with next() and prev().


  1.     <div class="controls">
     
        <input type="button" name="next"  class="controls-input-connect hov"  id="next" value="Next" /> &nbsp;
        <input type="button" name="prev"  class="controls-input-connect hov"  id="prev" value="Previous"/>
  2. </div>

  1. <script type="text/javascript" >

    var patient="Rick";

    $(function () {

        var url="healthPatientData.php";
       
        $.post(url, {'patient': patient}, processData, "json");
           
            function processData(myData) {

                $.each(myData, function () {

                    $.each(this, function (key, value) {

                        $("#what").append(key+": "+value+"<br>"); // append
           
                    }) // each2

                    $("#what").append("<br>");
                       
                }); // each1                   
            } // processData
    }); // ready