Create an array based on a Jquery Mobile List

Question

I have a list within jQuery Mobile. The list will have an id number and a search query number such as this

"<li><a href='./page.html?id=2' data-transition='slide' id=1>Name</a></li>";

and

"<li><a href='./page.html?id=10' data-transition='slide' id=2>Name</a></li>";

I create this list from an ajax call back so it is printed on the page like this $('#list').html(data);.

What I would like to do is have the list within an array so that when a user clicks one of the list options it would pull the information based on the search query or ?id=2 but the user could click a button on move to the next list item which is id=2.

So the search query gets the correct info from the database but the id is the position within the array.

Below is the code to populate the list its a callback from an ajax function

function trackscallback(rtndata) 
{ 

var data="";
for(j=0;j<=rtndata.length -1;j++)
{
    data = data + "<li><a href='./page.html?id="+rtndata[j].track_id+"' data-transition='slide' id="+rtndata[j].name+"><h3>" + rtndata[j].name + "</h3><p><strong>" + rtndata[j].a_name + "</strong></p><p>" + rtndata[j].genre+ "</p></a></li>";
}
$('#list').html(data);
$('#list').listview('refresh'); 
}

So this code will create a list in my DOM the user can click on of these to get more information or in my case play an mp3. The issue I have is that this can only enable a user to play one mp3 at a time. This means when the mp3 is finished playing the user has to go back to the list to select a new mp3 to play.

What I want is I want is that after the user selects an item from the list after it has completed playing it goes to the next item on the list and plays that.

My code for playing the mp3s is as follows:

function playtrackcallback(rtndata) 
{ 
track = rtndata.artist_name + " " + "-" + " " + rtndata.track_name;
picture = "<img src='"+rtndata.track_art_url+"'/>";
playingSongId = rtndata.track_id;
$('#songPicture').html(picture);
$('#songName').text(track);
playSong(rtndata);
}

function playSong(rtndata) {
        //Stop the sound from playing
        soundManager.destroySound(mySound);

        //Save some variables
        playingSong = rtndata.track_id;

        //Create the sound and begin playing whenever!
        soundManager.createSound({
            id: mySound,
            url: rtndata.track_url,
            autoPlay: true,
            stream: true,
            onplay: function () {
                setPauseState(false);
                setPlayTime();
            },

Answer 1

Upated answer

To create an Array of all links following the click list item.

Demo page

Markup / the naughty button!

<a class="next" data-role="button" href="" id="" data-inline="true">Next</a>

Code

// Create Array
var links = [];

$('li').on('click', 'a', function (e) {

 // Find all links after the clicked link/list item
 var list = $(this).closest('li').nextAll('li').find('a');

 // Wipe array
 links = [];

 // Push href and id of each link
 if (list.length > 0) {
    $.each(list, function () {
        links.push({
            'href': $(this).attr('href'),
                'id': $(this).attr('id')
        });
    });
 }
});

// Next song button
$('a.next').on('click', function (e) {

 // Update (Next) button href and id
 if (links.length > 0) {
  var nexthref = links[0].href;
  var nextid = links[0].id;
  $('a.next').attr('href', nexthref);
  $('a.next').attr('id', nextid);

  // Remove used values from Array
  links.splice(0, 1);
}
 // Move to next song
 $.mobile.changePage($(this).attr('href'), {
    transition: 'flip'
 });
});

Controls - Show/Hide 'Next' and 'Back' buttons (based on my demo)

// Last page
var lastpage = '#' + $('body').find('div[data-role="page"]').last()[0].id;

// Hide 'Next' button / Add button 'Back' button
$(document).on('pagebeforeshow', lastpage, function () {
 $('a.next').hide();
 $('[data-role=content]').append('<a class="last" data-role="button" href="#songs" data-inline="true">Back to Index</a>').trigger('create');
});

// Remove 'Back' button / show 'Next' button
$(document).on('pagebeforeshow', '#songs', function () {
 $('a.next').show();
 $('a.last').remove();
});